消息列表页不试用scroll-view组件实现

pages-buy/detail.vue

@@ -1,5 +1,6 @@
 <template>
-    <scroll-view scroll-y="true" :scroll-into-view="scrollViewId" upper-threshold="10" @scrolltoupper="onScrollTop" style="height: 100vh;">
+    <page-meta :page-style="loading? 'overflow: hidden;' : ''" />
+    <!-- <scroll-view scroll-y="true" :scroll-into-view="scrollViewId" upper-threshold="10" @scrolltoupper="onScrollTop" style="height: 100vh;"> -->
         <view class="list">
             <view class="item" v-for="item in list" :key="item.report_id" :id="`msg${item.report_id}${item.activity_id}`" >
                 <view class="msg-time">{{formatMsgTime(item.time)}}</view>
@@ -12,7 +13,7 @@
                 </view>
             </view>
         </view>
-    </scroll-view>
+    <!-- </scroll-view> -->
 </template>
 
 <script>
@@ -28,7 +29,8 @@ export default {
             page:1,
             pageSize:20,
             list:[],
-            finished:false
+            finished:false,
+            loading:false
         }
     },
     onLoad(options) {
@@ -41,30 +43,39 @@ export default {
     },
     methods: {
         async getList(){
+            this.loading=true
             const res=await apiBuyDetail({
                 classify_id_first:Number(this.classify_id_first),
                 activity_id:Number(this.activity_id),
                 current_index:this.page,
                 page_size:this.pageSize
             })
+            setTimeout(() => {
+                this.loading=false
+            }, 500);
             if(res.code===200){
                 let arr=res.data.list||[]
-                this.$nextTick(()=>{
-					this.scrollViewId=`msg${res.data.list[0].report_id}${res.data.list[0].activity_id}`
-				})
+                
                 let temarr=JSON.parse(JSON.stringify(arr))
                 this.list=[...temarr.reverse(),...this.list]
+                
                 if(res.data.paging.is_end){
                     this.finished=true
                 }
+
+                this.$nextTick(()=>{
+					this.scrollViewId=`msg${res.data.list[0].report_id}${res.data.list[0].activity_id}`
+                    uni.pageScrollTo({ selector:'#'+this.scrollViewId,duration:0 })
+				})
+                
             }
         },
 
-        onScrollTop(){
-            if(this.finished) return
-			this.page++
-			this.getList()
-        },
+        // onScrollTop(){
+        //     if(this.finished) return
+		// 	this.page++
+		// 	this.getList()
+        // },
 
         // 格式化消息时间
         formatMsgTime(e){
@@ -123,6 +134,14 @@ export default {
             }else{
                 uni.navigateTo({url:'/pages-report/reportDetail?reportId='+item.report_id})
             }
+        },
+
+        onPageScroll({ scrollTop }) {
+            if(this.loading||this.finished) return
+            if(scrollTop<20){
+                this.page++
+                this.getList()
+            }
         }
     }
 }