搜索页增加分页功能

pages-report/search.vue

@@ -15,7 +15,7 @@
             <view>找不到对应报告，试试别的搜索词吧</view>
         </view>
         <view class="list-wrap" v-else>
-            <view class="item" v-for="item in list" :key="item" @click="goReportDetail(item)">
+            <view class="item" v-for="item in list" :key="item.report_id" @click="goReportDetail(item)">
                 <view class="title" v-html="item.title"></view>
                 <view class="desc" v-html="item.content_sub"></view>
                 <view class="flex bot">
@@ -42,26 +42,44 @@ export default {
             searchVal:'',
             focus:true,
             list:[],
-            finished:false
+            finished:false,
+            page:1,
         }
     },
+    onReachBottom() {
+        if(this.finished) return
+        this.page++
+        this.getList()
+    },
     methods: {
         onChange(e){
             this.searchVal=e
         },
 
+        async getList(){
+            const res=await apiReportSearch({
+                key_word:this.searchVal,
+                current_index:this.page,
+                page_size:20,
+            })
+            if(res.code===200){
+                if(res.data.paging.is_end){
+                    this.finished=true
+                }
+                let arr=res.data.list||[]
+                this.list=[...this.list,...arr]
+            }
+        },
+
         async onSearch(){
             this.finished=false
+            this.page=1
+            this.list=[]
             if(!this.searchVal){
-                this.list=[]
                 this.finished=true
                 return
             }
-            const res=await apiReportSearch({key_word:this.searchVal})
-            if(res.code===200){
-                this.list=res.data.list||[]
-                this.finished=true
-            }
+            this.getList()
         },
 
         goReportDetail(item){
@@ -79,6 +97,9 @@ export default {
 .van-sticky-wrap--fixed{
   background-color: #fff;
 }
+page{
+    padding-bottom: 0;
+}
 </style>
 <style lang="scss" scoped>
 .empty-box{

pages-report/specialColumn/list.vue

@@ -5,7 +5,7 @@
         <view>暂无数据</view>
       </view>
       <view class="list" v-else>
-        <view class="flex item" v-for="item in list" :key="item" @click="goDetail(item)">
+        <view class="flex item" v-for="item in list" :key="item.classify_id_second" @click="goDetail(item)">
           <image class="avatar" :src="item.home_img_url" mode="aspectFill" lazyload/>
           <view class="content">
             <view class="name">{{item.classify_name_second}}</view>