task#14072，审批列表添加滚动样式

src/views/vehicle-maintenance/vehicle-maintenance-list.vue

@@ -18,7 +18,32 @@
       <span class="numTip" style="opacity: 1 !important;" v-if="index===0 && item.num">{{item.num}}</span>
     </div>
   </div>
-  <van-pull-refresh  v-model="isLoading"  @refresh="onRefresh"  v-show="!show">
+  <van-pull-refresh class="refresh" v-model="isLoading" @refresh="onRefresh" v-show="!show">
+    <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+    >
+      <div class="listWrap">
+        <div class="listItem"  @click="noMultipleClicks(goPageDetail,item)" v-for="(item,index) in pageList" :key="index">
+          <div class="line1">
+            <div class="title">{{item.stage}}</div>
+            <div class="right">
+              <img class="commonImg" :src="getStatus(item.states?.code)">
+              <div :class="getStatusColor(item.states?.code)">{{ item.states?.label }}</div>
+            </div>
+          </div>
+          <div class="driverInfo">{{ item.vehicleName }} /  {{ item.plateNumber }}</div>
+          <div class="time">{{ item.createTime }}</div>
+        </div>
+      </div>
+    </van-list>
+  </van-pull-refresh>
+  <div class="bgEmptyImg" v-show="show" >
+    <img  src="@/assets/empty.png" />
+  </div>
+<!--  <van-pull-refresh  v-model="isLoading"  @refresh="onRefresh"  v-show="!show">
     <div class="listWrap">
       <div class="listItem"  @click="noMultipleClicks(goPageDetail,item)" v-for="(item,index) in pageList" :key="index">
         <div class="line1">
@@ -35,7 +60,7 @@
   </van-pull-refresh>
   <div class="bgEmptyImg" v-show="show" >
     <img  src="@/assets/empty.png" />
-  </div>
+  </div>-->
 </div>
 </template>
 
@@ -53,11 +78,14 @@ export default {
       pageList:[],
       pageNum:1,
       pageSize:10,
-      isLoading:"",
+      total:'',
       noClick:true,
       isShowBackBtn:true,
       inApprovalCount:0,
       status:'',
+      isLoading:"",
+      loading: false,
+      finished: false,
     }
   },
   mounted() {
@@ -68,7 +96,6 @@ export default {
     }else{
       this.isShowBackBtn=true
     }
-    // this.isShowBackBtn=this.$route.params.isShowBackBtn
     this.activeIndex=this.$route.params?.activeIndex || 0
     this.getList()
   },
@@ -78,6 +105,17 @@ export default {
     },
   },
   methods: {
+    async onLoad(){
+      this.pageNum++;
+      await this.getList()
+      this.loading = false;
+      console.log("this.pageList.length",this.pageList.length)
+      console.log("this.total",this.total)
+
+      if (this.pageList.length >= this.total) {
+        this.finished = true;
+      }
+    },
     goPrePage(){
       this.$router.push({  name: 'toDoList' });
     },
@@ -116,9 +154,18 @@ export default {
           return require('@/assets/waitSubmit.png')
       }
     },
+/*    onRefresh() {
+      vehicleMaintenanceCount();
+      // this.getList()
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+      }, 1000);
+    },*/
     onRefresh() {
       vehicleMaintenanceCount();
-      this.getList()
+      this.pageNum=1
+      // this.getList()
       setTimeout(() => {
         this.$toast('刷新成功');
         this.isLoading = false;
@@ -128,23 +175,35 @@ export default {
       this.activeIndex = index
       this.pageNum = 1
       this.pageList = [];
+      this.total=0
       await this.getList()
     },
     async getList() {
       let result=await vehicleMaintenanceCount();
       if(result.code==200 && result.data){
         this.tabArr[0].num=result.data.inApprovalCount
-        // console.log("this.tabArr[0].num",this.tabArr[0].num)
       }
       let res=await vehicleMaintenanceList ({
         pageNum:this.pageNum,
         pageSize:this.pageSize,
         queryType:this.activeIndex+1,
       })
+      // this.pageList=res.data
+      // console.log("===",this.pageList)
+      this.total=res.total
+      if(this.pageNum == 1){// 第一页直接赋值
         this.pageList=res.data
+      }else{// 第二页数据拼接
+        console.log("第二页数据拼接")
+        let preList = this.pageList;
+        // console.log("preList",preList)
+        let arr = res.data;
+        // console.log("arr",arr)
+        this.pageList = preList.concat(arr)
+        console.log("this.pageList====",this.pageList)
+      }
     },
     goPageDetail(item){
-      // console.log("跳转详情",item)
       this.$router.push({
         name: 'maintenanceApplication',  // 目标路由的名称
         params: {
@@ -163,13 +222,23 @@ export default {
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
 @import "@/styles/approval.scss";
-.navBar{
-  height: 46px;
-}
-/*.listWrap{
-  height: calc(100% - 100px);
+.wrap{
+  @include wh(100%,100%);
+  box-sizing: border-box;
   overflow-y: auto;
-}*/
+}
+.navBar{
+  margin-bottom: 46px;
+}
+::v-deep .van-list__finished-text{
+  background-color: #F4F5F7 !important;
+  padding-bottom: 10px;
+}
+::v-deep .van-pull-refresh{
+  height: calc(100% - 86px) ;
+  overflow-y: auto;
+  background-color: #F4F5F7;
+}
 .listItem{
   padding: 11px 28px 11px 23px;
   div{