二手车交易，首页列表和我的发布加加载分页功能

src/views/secondHandCar/indexList.vue

@@ -11,10 +11,10 @@
     </div>
     <div class="firstTab">
       <div>
-        <img class="big com" v-show="activeTab === 0"  src="@/assets/secondHandCar/cheyuanBig.png" @click="activeTab = 0" />
-        <img class="small com" v-show="activeTab === 1" src="@/assets/secondHandCar/cheyuanSmall.png" @click="activeTab = 0"/>
-        <img class="big" v-show="activeTab === 1" src="@/assets/secondHandCar/qiugouBig.png" @click="activeTab = 1"/>
-        <img class="small" v-show="activeTab === 0" src="@/assets/secondHandCar/qiugouSmall.png" @click="activeTab = 1"/>
+        <img class="big com" v-show="activeTab === 0"  src="@/assets/secondHandCar/cheyuanBig.png" @click="tabClick(0)" />
+        <img class="small com" v-show="activeTab === 1" src="@/assets/secondHandCar/cheyuanSmall.png" @click="tabClick(0)"/>
+        <img class="big" v-show="activeTab === 1" src="@/assets/secondHandCar/qiugouBig.png" @click="tabClick(1)"/>
+        <img class="small" v-show="activeTab === 0" src="@/assets/secondHandCar/qiugouSmall.png" @click="tabClick(1)"/>
       </div>
       <div @click="poupShow = true">
         <img class="suggest" src="@/assets/secondHandCar/suggest.png" />
@@ -62,34 +62,41 @@
         </el-option>
       </el-select>
     </div>
-    <div class="contentWrap" v-show="!showEmpty">
+    <div class="contentWrap" v-show="!show">
       <van-pull-refresh v-model="isLoading" @refresh="onRefresh"  style="min-height:85vh">
-        <div class="contentItem">
-          <div class="item" v-for="(item,index) in pageList" :key="index" @click="viewCarSource(item)">
-            <div class="left">
-              <img class="img" v-if="item.vehicleAnglePhoto"  :src="item.vehicleAnglePhoto" />
-              <div v-else class="qiugou">{{item.vehicleType?.substring(0,2)}}</div>
-            </div>
-            <div class="right">
-              <div class="title">{{item.vehicleType}}</div>
-              <div v-if="activeTab==0" class="type">{{ item.boardType?.label }} | {{ item.licenseType?.label }} |
-                {{ item.brandModel?.match(/^[\u4e00-\u9fa5]+/)?.[0]?.replace(/牌$/, '') }} | {{ item.mileage }}km | {{item.emissionStandard?.label}}</div>
-              <div v-else class="type">{{ item.boardType?.label }} |
-                {{item.vehicleType }} | {{item.emissionStandard?.label}}</div>
-              <div class="date" v-show="activeTab==0 && item.registerDate">注册日期： {{item.registerDate?.substring(0,10)}}</div>
-              <div v-if="activeTab==0" class="price"><span>￥</span> <span>{{formatNumber(item.maxPrice) }}</span> <span>万</span> </div>
-              <div v-else class="priceRange">
-                <span class="num">{{formatNumber(item.minPrice) }}</span> <span  class="danwei">万</span>
-                <span class="su">~</span>
-                <span class="num">{{formatNumber(item.maxPrice) }}</span> <span  class="danwei">万</span>
+        <van-list
+            v-model="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+            @load="onLoad"
+        >
+          <div class="contentItem">
+            <div class="item" v-for="(item,index) in pageList" :key="index" @click="viewCarSource(item)">
+              <div class="left">
+                <img class="img" v-if="item.vehicleAnglePhoto"  :src="item.vehicleAnglePhoto" />
+                <div v-else class="qiugou">{{item.vehicleType?.substring(0,2)}}</div>
+              </div>
+              <div class="right">
+                <div class="title">{{item.vehicleType}}</div>
+                <div v-if="activeTab==0" class="type">{{ item.boardType?.label }} | {{ item.licenseType?.label }} |
+                  {{ item.brandModel?.match(/^[\u4e00-\u9fa5]+/)?.[0]?.replace(/牌$/, '') }} | {{ item.mileage }}km | {{item.emissionStandard?.label}}</div>
+                <div v-else class="type">{{ item.boardType?.label }} |
+                  {{item.vehicleType }} | {{item.emissionStandard?.label}}</div>
+                <div class="date" v-show="activeTab==0 && item.registerDate">注册日期： {{item.registerDate?.substring(0,10)}}</div>
+                <div v-if="activeTab==0" class="price"><span>￥</span> <span>{{formatNumber(item.maxPrice) }}</span> <span>万</span> </div>
+                <div v-else class="priceRange">
+                  <span class="num">{{formatNumber(item.minPrice) }}</span> <span  class="danwei">万</span>
+                  <span class="su">~</span>
+                  <span class="num">{{formatNumber(item.maxPrice) }}</span> <span  class="danwei">万</span>
+                </div>
+                <div class="line"></div>
               </div>
-              <div class="line"></div>
             </div>
           </div>
-        </div>
+        </van-list>
       </van-pull-refresh>
     </div>
-    <div class="empty" v-show="showEmpty">
+    <div class="empty" v-show="show">
       <img src="@/assets/empty.png" />
     </div>
     <img v-show="activeTab==0" @click="releaseHandle(1)" class="fixImg" src="@/assets/secondHandCar/sellCar.png" />
@@ -113,8 +120,6 @@ import {myMixins} from "@/utils/myMixins"
 import {appPageList,userFeedback } from "@/api/secondHandCar"
 export default {
   name: "indexList",
-  computed: {
-  },
   mixins:[myMixins],
   watch:{
     activeTab(){
@@ -147,8 +152,12 @@ export default {
       pageList:[],
       topSearch:'',
       activeTab:0,
-      showEmpty:false,
-      isLoading:false,
+      isLoading:"",
+      loading: false,
+      finished: false,
+      pageNum:1,
+      pageSize:10,
+      total:'',
       licenseType:'',
       vehicleType:'',
       priceSort:'',
@@ -185,7 +194,23 @@ export default {
       }
     });
   },
+
   methods:{
+    async tabClick(type){
+      this.activeTab=type
+      this.pageNum = 1
+      this.pageList = [];
+      this.total=0
+      await this.getList()
+    },
+    async onLoad(){
+      this.pageNum++;
+      await this.getList()
+      this.loading = false;
+      if (this.pageList.length >= this.total) {
+        this.finished = true;
+      }
+    },
     changePrice(){
       if(!this.priceSort){
         this.priceSort=1
@@ -256,14 +281,17 @@ export default {
       this.$toast('反馈建议提交成功')
     },
     onRefresh() {
-      this.getList()
+      this.pageNum=1
       setTimeout(() => {
         this.$toast('刷新成功');
         this.isLoading = false;
       }, 1000);
     },
+
     async getList(){
       let res= await appPageList({
+        pageNum:this.pageNum,
+        pageSize:this.pageSize,
         type:this.activeTab==0 ? 1 : 2,
         topSearch:this.topSearch,
         licenseType:this.licenseType,
@@ -271,13 +299,14 @@ export default {
         priceSort:this.priceSort,
         boardType:this.boardType,
         emissionStandard:this.emissionStandard,
-        // brandModel:this.brandModel,
       })
-      this.pageList=res.data
-      if(this.pageList?.length === 0){
-        this.showEmpty  = true
-      }else {
-        this.showEmpty = false
+      this.total=res.total
+      if(this.pageNum == 1){// 第一页直接赋值
+        this.pageList=res.data
+      }else{// 第二页数据拼接
+        let preList = this.pageList;
+        let arr = res.data;
+        this.pageList = preList.concat(arr)
       }
     },
     goApp(){
@@ -290,7 +319,12 @@ export default {
         window.android.sendMessage("goBack");
       }
     },
-  }
+  },
+  computed:{
+    show() {
+      return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
+    },
+  },
 }
 </script>
 <style scoped lang="scss">