提交代码

pages/message1/steadyState.vue

@@ -21,6 +21,9 @@
         <scroll-view
             v-if="filterValue == '越限数量'"
             scroll-y="true"
+            @scroll="onScroll"
+            :scroll-top="scrollTop"
+            scroll-with-animation
             @refresherrefresh="refresherrefresh"
             @scrolltolower="scrolltolower"
             :refresher-triggered="triggered"
@@ -91,6 +94,9 @@
         <scroll-view
             v-if="filterValue == '越限测点数'"
             scroll-y="true"
+            @scroll="onScroll"
+            :scroll-top="scrollTop"
+            scroll-with-animation
             @refresherrefresh="refresherrefresh"
             @scrolltolower="scrolltolower"
             :refresher-triggered="triggered"
@@ -143,6 +149,9 @@
             ></uni-load-more>
             <Cn-empty v-else style="top: 20%"></Cn-empty>
         </scroll-view>
+        <view class="back-top boxClick" v-show="showBackTop" @click="backToTop">
+            <uni-icons type="arrow-up" size="22" color="#fff"></uni-icons>
+        </view>
     </view>
 </template>
 <script>
@@ -181,6 +190,9 @@ export default {
 
             triggered: true,
             status: 'noMore', //more加载前  loading加载中 noMore加载后
+            scrollTop: 0,
+            oldScrollTop: 0,
+            showBackTop: false,
         }
     },
     mounted() {
@@ -206,6 +218,8 @@ export default {
         //   "time": ""
         // 查詢
         init() {
+            this.showBackTop = false
+            this.scrollTop = 0
             if (this.filterValue == '越限测点数') {
                 this.store = this.DataSource('/cs-harmonic-boot/csHarmonic/queryAppHarmonicLine')
             } else {
@@ -253,6 +267,17 @@ export default {
                 this.store.next && this.store.next()
             }
         },
+        onScroll(e) {
+            this.oldScrollTop = e.detail.scrollTop
+            this.showBackTop = e.detail.scrollTop > 200
+        },
+        backToTop() {
+            this.scrollTop = this.oldScrollTop
+            this.$nextTick(() => {
+                this.scrollTop = 0
+            })
+            this.showBackTop = false
+        },
     },
 
     computed: {},
@@ -300,6 +325,21 @@ export default {
     display: none;
 }
 
+.back-top {
+    position: fixed;
+    right: 30rpx;
+    bottom: 60rpx;
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 50%;
+    background: #376cf3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4rpx 16rpx rgba(55, 108, 243, 0.35);
+    z-index: 99;
+}
+
 .textBox {
     max-height: 110rpx;
     overflow-y: auto;