vant van-tabs van-pull-refresh van-list 标签栏+上拉加载+下拉刷新

<template>
  <div class="huibj">
    <div class="listtab">
      <!--顶部导航-->
      <div class="topdh">
        <topnav topname="余额明细"></topnav>
      </div>
      <!--Tab 标签-->
      <van-tabs v-model="yeactive"
                @change="Tabnav">
        <van-tab v-for="(item,index) in yetabList"
                 :key="index"
                 :title="item.title"
                 :name="item.name">
        </van-tab>
      </van-tabs>
    </div>
    <div class="ye_mxlist">
      <van-pull-refresh
        v-model="ye_isLoading"
        success-text="刷新成功"
        @refresh="ye_onRefresh">
        <van-list
          v-model="ye_loading"
          :finished="ye_finished"
          finished-text="-- END --"
          @load="ye_onLoad">
          <van-cell v-for="(item,index) in ye_list" :key="index">
            <div class="ye_dljl_mx" @click="goyuemx(item)" style="height: 40px">
              {{index}}
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
//以下是组件  #
import topnav from '@/components/topnav/topnav'; //顶部导航

export default {
  name: 'yemxZ',
  data() {
    return {
      //Tab 标签
      yetabList: [
        {
          title: "aa",
          name: "0"
        },
        {
          title: "bb",
          name: '1'
        },
        {
          title: "cc",
          name: '2'
        },
      ],
      yeactive: '0', //tab默认值
      //上拉加载下拉刷新
      ye_isLoading: false, //是否下拉刷新
      ye_loading: false,//是否处于加载状态
      ye_finished: false, //	是否已加载完成
      ye_list: [],
    };
  },
  components: {
    topnav,
  },
  mounted() {
    //this.getData()
  },
  methods: {
    //tab切换
    Tabnav() {
      console.log(2)
      console.log(this.yeactive)
    },
    //下拉刷新
    ye_onRefresh() {
      let that=this
      setTimeout(() => {
        that.ye_isLoading = false;
        that.ye_onLoad();
      }, 1000);
    },
    ye_onLoad() {//   滚动条与底部距离小于 offset 时触发  offset可以自定义
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.ye_list.push(this.ye_list.length + 1);
        }
        this.ye_loading = false;
        if (this.ye_list.length >= 40) {
          this.ye_finished = true;
        }
      }, 1000);
    },

    goyuemx(val) {
      console.log(5)

    }
  }
};
</script>

<style scoped>

</style>