提交代码

pages/index/comp/transient.vue

@@ -12,12 +12,13 @@
         </view>
 
         <!-- 申请记录 -->
-        <view v-if="curSub == 1">
+        <view v-if="curSub == 1" style="position: relative">
             <view class="filterCriteria">
                 <!-- 筛选条件 -->
                 <Cn-filterCriteria @select="select" :showQianTree="false"> </Cn-filterCriteria>
             </view>
-            <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="record event-list mt20"
                 :style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }">
                 <uni-card class="event-item" :class="item.type" v-for="(item, index) in store.data" :key="index">
@@ -90,6 +91,9 @@
                     :status="store.status"></uni-load-more>
                 <Cn-empty v-else style="top: 30%"></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>
     </view>
 </template>
@@ -132,6 +136,9 @@ export default {
             userInfo: {},
             height: 0,
             selectValue: {},
+            scrollTop: 0,
+            oldScrollTop: 0,
+            showBackTop: false,
         }
     },
     created() { },
@@ -170,6 +177,8 @@ export default {
 
         sectionChange(index) {
             this.curSub = index.currentIndex
+            this.showBackTop = false
+            this.scrollTop = 0
         },
         // 生成报告
         generate(item) {
@@ -284,6 +293,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
+        },
     },
     watch: {},
 }
@@ -383,4 +403,19 @@ export default {
 /deep/ .uni-scroll-view-refresher {
     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>