vant-ui的list

一，实现的效果

二，实现的思路

 <van-tabs v-model="active" line-width="33%">
            <van-tab title="全部">
               <van-list
                  v-model="loading_1"
                  :finished="finished_1"
                  offset="20"
                  finished-text="到底啦~"
                  @load="onLoad"
                >
                  <detail-item :renderList="renderList"></detail-item>
                </van-list>
            </van-tab>
            <van-tab title="收入">
              <van-list
                  v-model="loading_2"
                  :finished="finished_2"
                  offset="20"
                  finished-text="到底啦~"
                  @load="onLoad"
                >
                  <detail-item :renderList="renderList"></detail-item>
              </van-list>
            </van-tab>
            <van-tab title="支出">
              <van-list
                  v-model="loading_3"
                  :finished="finished_3"
                  offset="20"
                  finished-text="到底啦~"
                  @load="onLoad"
                >
                  <detail-item :renderList="renderList"></detail-item>
              </van-list>
            </van-tab>
          </van-tabs>

这样写之后，还是会有点问题。
因为我有三个导航栏，每次导航栏切换，就需要把渲染的数据列表清空，然后再去获取新的数据列表。

第一种情况是本tab数据没有全部加载完，就切换tab,此时this.loading=false,this.finished=false,会发生的事情是，第二次进入某tab的时候。不会加载数据，然而数据清空了，又不加载数据，就导致白屏。
解决办法：

第二种情况是，当前tab的数据请求完了。切换tab的时候this.loading=false,this.finished=true,不会再发生滚轮触底然后加载数据了，所以，还是需要重置参数：

三，总的代码：

<template>
  <div class="detail img_bg">
  <!-- 页面头部 -->
      <header-item title='明细查询'></header-item>
  <!-- 列表展示 -->
      <div class="detailBox" ref="rightContent">
          <van-tabs v-model="active" line-width="33%">
            <van-tab title="全部">
               <van-list
                  v-model="loading_1"
                  :finished="finished_1"
                  :immediate-check="false"
                  offset="100"
                  finished-text="到底啦~"
                  @load="onLoad"
                >
                  <detail-item :renderList="renderList"></detail-item>
                </van-list>
            </van-tab>
            <van-tab title="收入">
              <van-list
                  v-model="loading_2"
                  :finished="finished_2"
                  :immediate-check="false"
                  offset="100"
                  finished-text="到底啦~"
                  @load="onLoad"
                >
                  <detail-item :renderList="renderList"></detail-item>
              </van-list>
            </van-tab>
            <van-tab title="支出">
              <van-list
                  v-model="loading_3"
                  :finished="finished_3"
                  :immediate-check="false"
                  offset="100"
                  finished-text="到底啦~"
                  @load="onLoad"
                >
                  <detail-item :renderList="renderList"></detail-item>
              </van-list>
            </van-tab>
          </van-tabs>
      </div>
  </div>
</template>

<script>
import headerItem from '../components/HeaderItem.vue'
import detailItem from '../components/DetailItemList.vue'
export default {
    
     
  data() {
    
    
    return {
    
    
      active: 0,          //当前是哪个tab激活
      totalList:[
        {
    
    
          payway:'二维码',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'消费'
        },
        {
    
    
          payway:'二维码',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'充值'
        },
        {
    
    
          payway:'龙支付',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'充值'
        },
        {
    
    
          payway:'支付宝',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'消费'
        },
        {
    
    
          payway:'二维码',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'消费'
        },
        {
    
    
          payway:'二维码',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'充值'
        },
        {
    
    
          payway:'龙支付',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'充值'
        },
        {
    
    
          payway:'支付宝',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'消费'
        },
        {
    
    
          payway:'二维码',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'消费'
        },
        {
    
    
          payway:'二维码',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'充值'
        },
        {
    
    
          payway:'龙支付',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'充值'
        },
        {
    
    
          payway:'支付宝',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'消费'
        },
        {
    
    
          payway:'二维码',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'消费'
        },
        {
    
    
          payway:'二维码',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'充值'
        },
        {
    
    
          payway:'龙支付',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'充值'
        },
        {
    
    
          payway:'支付宝',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'消费'
        },
        {
    
    
          payway:'二维码',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'消费'
        },
        {
    
    
          payway:'二维码',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'充值'
        },
        {
    
    
          payway:'龙支付',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'充值'
        },
        {
    
    
          payway:'支付宝',
          apyAdress:'蔬菜店',
          money:'80.00',
          time: '2021-01-08  11:23:34',
          type:'消费'
        }
      ],
      loading_1: false,   //这个控制的是是否加载（false的话不显示加载中）
      finished_1: false,  //这个控制的是加载是否结束（true的话滚轮触底不加载）
      loading_2: false,
      finished_2: false,
      loading_3: false,
      finished_3: false,
      pageSize: 10,
      pageCurrent: 1,
      navSelected:0,    // 0-全部/1-收入/2-支出
      renderList:[],     //页面数据列表
      scrollBottom:100
    }
  },
  watch:{
    
    
    active(newval){
    
    
      this.pageSize=10
      this.pageCurrent=1
      this.renderList=[]
      switch (newval) {
    
    
        case 0:
          this.navSelected=0
          this.finished_1=false
          break;
        case 1:
          this.navSelected=1
          this.finished_2=false
          break;
        default:
          this.navSelected=2
          this.finished_3=false
          break;
      }
      this.getList()
      console.log("执行了watch")
    }
  },
  components: {
    
    
    headerItem,
    detailItem
  },
  created(){
    
    
    this.getList()
  },
  mounted: function(){
    
    
  //在mounted钩子函数绑定滚动条事件
  this.$refs.rightContent.addEventListener('scroll', this.scrool);
  },
  methods:{
    
    
    /**
     * 滚动条到底部，触发获取新数据的事件
     */
    onLoad() {
    
    
      if(this.scrollBottom==0 || this.renderList.length<this.pageSize){
    
    
        //规避切换tab，导致的滚动条事件触发load
        return
      }
      this.pageCurrent++
      this.getList()
    },
    /**
     * 获取列表数据
     */
    getList () {
    
    
      var that=this
      let params = {
    
    
        TXCODE: 'VAT210',                            //功能编号
        token: localStorage.getItem('localToken'),   //token
        userId: localStorage.getItem('cidNo'),       //用户id
        campusId: localStorage.getItem('campusId'),  //园区id
        fcnNo: this.navSelected,                // 0-全部/1-收入/2-支出
        pageCurrent: this.pageCurrent,         //当前页码
        pageSize: this.pageSize             //每一页数量
      }
      that.ajax('get', params, res => {
    
    
        if(res.data.DATA && res.data.DATA.length > 0){
    
    
            that.renderList= [...that.renderList, ...res.data.DATA]
            that.switchBtn(false,false)
            if(res.data.DATA.length< that.pageSize){
    
    
              that.switchBtn(false,true)
            }
        }else{
    
    
          that.switchBtn(false,true)
        }
      }, err => {
    
    
        console.log(err)
      })
    },
    /**
     * 监听滚动条
     */
    scrool(){
    
    
      var top=this.$refs.rightContent.scrollTop 
      var box=this.$refs.rightContent.clientHeight  
      var total=this.$refs.rightContent.scrollHeight  
    //  console.log(total-top-box)    //滚动条到底部的距离
      this.scrollBottom=total-top-box
      
    },
    /**
     * 修改loading和finished的状态
     */
    switchBtn(loading,finished){
    
    
      switch (this.active) {
    
    
        case 0:
          this.loading_1=loading
          this.finished_1=finished
          break;
        case 1:
          this.loading_2=loading
          this.finished_2=finished
          break;
        default:
          this.loading_3=loading
          this.finished_3=finished
          break;
      }
    }
  }
}
</script>

<style lang='less' scoped>
.detail{
    
    
  background-image: url(../assets/images/total_bg.png);
  .detailBox{
    
    
    width: 700px;
    height: 1220px;
    display: block;
    margin: 0 auto;
    background: #FFFFFF;
    box-shadow: 0px 2px 23px 4px rgba(203, 204, 204, 0.32);
    border-radius: 20px;
    padding: 0px 30px 0px;
    box-sizing: border-box;
    margin-top: 20px;
    overflow: auto;
    /deep/.van-tabs{
    
    
      .van-tabs__wrap{
    
    
        position: fixed;
        width: 640px;
        height: 100px;
        .van-tabs__nav{
    
    
          height: 100px;
          .van-tab{
    
    
            height: 100%;
            .van-tab__text{
    
    
              display: block;
              height: 100%;
              font-size: 34px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 500;
              line-height: 100px;
              color: #999999;
            }
          }
          .van-tabs__line{
    
    
            background: #477BFF;
          }
          .van-tab--active .van-tab__text{
    
    
            color: #477BFF;
          }
        }
      }
    }
  }
  /deep/.van-list{
    
    
    .van-list__loading{
    
    
      .van-loading__spinner{
    
    
        margin-top: 5px;
        height: 30px!important;
        width: 30px!important;
      }
      .van-loading__text{
    
    
        font-size: 34px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        line-height: 100px;
        color: #999999;
      }
    }
    .van-list__finished-text{
    
    
        font-size: 34px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        line-height: 100px;
        color: #999999;
      }
  }
}
</style>