局部滚动触底加载

src/project/qujing/AppLegalLearning/classDetail.vue

@@ -24,7 +24,7 @@
 
     <u-popup v-model="showComment" mode="bottom" border-radius="32">
 			<h4 class="message_num">共{{ data.msgCount }}条评论</h4>
-      <div class="comment_box" v-if="commentList.length">
+      <scroll-view scroll-y="true" @scrolltolower="scrollLower" class="comment_box" v-if="commentList.length">
         <div class="comment_card" v-for="item in commentList" :key="item.id">
           <div class="avatar">
             <img :src="item.avatar" alt="" v-if="item.avatar">
@@ -38,7 +38,7 @@
             <div class="comm_content">{{ item.content }}</div>
           </div>
         </div>
-      </div>
+      </scroll-view>
       <AiEmpty :description="`暂无相关评论`" class="emptyWrap" v-else/>
 
       <div class="comm_input_btn" @click="showSend = true,showComment= false">
@@ -78,6 +78,7 @@ export default {
       commentList: [],
       id: '',
       flag: false,
+      current: 1,
     }
   },
   onLoad(o) {
@@ -94,9 +95,15 @@ export default {
     },
     // 评论集合
     getComment() {
-      this.$instance.post(`/app/appcoursecomment/listByApplet?courseId=${this.data.id}`).then(res=> {
+      this.$instance.post(`/app/appcoursecomment/listByApplet`,null,{
+        params: {
+          current: this.current,
+          size: 10,
+          courseId: this.data.id,
+        }
+      }).then(res=> {
         if(res?.data) {
-          this.commentList = res.data.records
+          this.commentList = this.current==1? res.data.records: [...this.commentList,...res.data.records]
         }
       })
     },
@@ -141,7 +148,11 @@ export default {
     },
     keyboard(e) {
       console.log(e.detail.height);
-    }
+    },
+    scrollLower() {
+      this.current++
+      this.getComment()
+    },
   },
   onUnload() {
     this.stop()
@@ -247,7 +258,6 @@ export default {
   .comment_box {
     width: 100%;
     max-height: 60vh;
-    overflow: scroll;
     .comment_card {
       display: flex;
       padding: 24px 32px;

src/project/qujing/AppLegalLearning/components/GeneralLawExam.vue

@@ -7,7 +7,7 @@
 
     <p class="all_test">全部考试</p>
     <div class="card_list" v-if="testList.length">
-      <scroll-view :style="{height: height + 'px'}" scroll-y>
+      <scroll-view :style="{height: height + 'px'}" scroll-y @scrolltolower="scrolltLower">
         <div class="card" v-for="item in testList" :key="item.id">
           <div class="card_top">
             <div class="card_title">{{ item.examinationName }}</div>
@@ -97,7 +97,7 @@ export default {
         }
       }).then(res=> {
         if(res?.data) {
-          this.testList = res.data.records
+          this.testList = this.current==1? res.data.records: [...this.testList,...res.data.records]
         }
       })
     },
@@ -153,12 +153,12 @@ export default {
         this.showAuth = false
         this.$u.toast(err.msg)
       })
+    },
+    scrolltLower() {
+      this.current++
+      this.getList()
     }
   },
-  onReachBottom() {
-    this.current++;
-    this.getList()
-  },
 }
 </script>
 

src/project/qujing/AppLegalLearning/components/OnlineClass.vue

@@ -7,7 +7,7 @@
     <p class="all_class">全部课程</p>
 
     <div class="card_list" v-if="classList.length">
-      <scroll-view :style="{height: height + 'px'}" scroll-y>
+      <scroll-view :style="{height: height + 'px'}" scroll-y @scrolltolower="scrolltLower">
         <div class="card" v-for="item in classList" :key="item.id" @click="handleToDetail(item.id)">
           <div class="card_left">
             <img :src="item.pictureUrl" alt="">
@@ -48,17 +48,20 @@ export default {
         }
       }).then(res=> {
         if(res?.data) {
-          this.classList = res.data.records
+          this.classList = this.current==1? res.data.records: [...this.classList,...res.data.records]
         }
       })
     },
     handleToDetail(id) {
       this.$emit('toDetail',id)
+    },
+    scrolltLower() {
+      this.current ++;
+      this.getList()
     }
   },
   onReachBottom() {
-    this.current ++;
+    
-    this.getList()
   },
 }
 </script>