提交代码

pages/message1/run.vue

@@ -3,7 +3,8 @@
         <!-- 运行事件 -->
 
         <!-- 卡片 -->
-        <scroll-view scroll-y="true" @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower"
+        <scroll-view scroll-y="true" @scroll="onScroll" :scroll-top="scrollTop" scroll-with-animation
+            @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower"
             :refresher-triggered="triggered" refresher-enabled="true" class="event-list"
             :style="{ height: 'calc(100vh - ' + (navHeight + 10) + 'px)', overflow: 'auto' }">
             <!-- 循环渲染事件项 -->
@@ -40,6 +41,9 @@
                 :status="store.status"></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>
@@ -61,6 +65,9 @@ export default {
     data() {
         return {
             triggered: true,
+            scrollTop: 0,
+            oldScrollTop: 0,
+            showBackTop: false,
         }
     },
     mounted() { },
@@ -106,6 +113,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: {},
@@ -156,4 +174,19 @@ 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;
+}
+
 </style>