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>
相关推荐
浏览器API调用工程师_Taylor1 分钟前
Look my eyes 都2025年了,你还不会将重复的事情自动化?
前端·javascript·爬虫
zhaocarbon6 分钟前
vue2 echarts中国地图、在地图上标注经纬度及标注点
前端·javascript·echarts
咔咔咔索菲斯18 分钟前
Vue 中mounted 生命周期钩子的执行时机和 v-for 的渲染顺序
前端·javascript·vue.js
前端小咸鱼一条19 分钟前
Vue响应式原理一:认识响应式逻辑
前端·javascript·vue.js
初心w50t21 小时前
Vue 前端开发性能优化攻略
前端·javascript·vue.js
3Katrina1 小时前
前端面试之防抖节流(一)
前端·javascript·面试
kk_stoper1 小时前
使用Ruby接入实时行情API教程
java·开发语言·javascript·数据结构·后端·python·ruby
浏览器API调用工程师_Taylor2 小时前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫
FogLetter2 小时前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
轻语呢喃2 小时前
js事件机制:监听、捕获、冒泡与委托
javascript