|
|
@@ -8,27 +8,41 @@
|
|
|
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css">
|
|
|
<style>
|
|
|
#getLocationBtn {
|
|
|
- transform: scale(2);
|
|
|
+ transform: scale(3);
|
|
|
+ }
|
|
|
+ #app {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100vh;
|
|
|
}
|
|
|
</style>
|
|
|
+ <script>
|
|
|
+ window.addEventListener('load', function() {
|
|
|
+ var app = document.body;
|
|
|
+ var startY;
|
|
|
+ var dist;
|
|
|
+ var threshold = 100; // 下拉刷新的阈值
|
|
|
+
|
|
|
+ app.addEventListener('touchstart', function(e) {
|
|
|
+ startY = e.touches[0].clientY;
|
|
|
+ });
|
|
|
+
|
|
|
+ app.addEventListener('touchmove', function(e) {
|
|
|
+ dist = e.touches[0].clientY - startY;
|
|
|
+ if (dist > threshold) {
|
|
|
+ // 执行刷新操作
|
|
|
+ location.reload();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ </script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="app" class="container">
|
|
|
<div class="row justify-content-center mt-5">
|
|
|
<button id="getLocationBtn" class="btn btn-primary btn-lg" v-on:click="sendLocationToBackend">记录</button>
|
|
|
</div>
|
|
|
-<!-- <div class="row justify-content-center mt-3">-->
|
|
|
-<!-- <label for="longitude">经度:</label>-->
|
|
|
-<!-- <label id="longitude" class="ml-2">{{longitude}}</label>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- <div class="row justify-content-center mt-2">-->
|
|
|
-<!-- <label for="latitude">纬度:</label>-->
|
|
|
-<!-- <label id="latitude" class="ml-2">{{latitude}}</label>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- <div class="row justify-content-center mt-2">-->
|
|
|
-<!-- <label for="locationStr">位置:</label>-->
|
|
|
-<!-- <label id="locationStr" class="ml-2">{{locationStr}}</label>-->
|
|
|
-<!-- </div>-->
|
|
|
</div>
|
|
|
|
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.16/vue.min.js"></script>
|
tianyun