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>
相关推荐
我命由我12345几秒前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
16年上任的CTO几秒前
一文讲清楚React中的key值作用与原理
前端·javascript·react.js·react key
阳火锅9 分钟前
在生产环境下,你真的有考虑到使用数组方法的健壮性吗?
前端·javascript·面试
石头wang12 分钟前
如何在idea里快速地切换Windows CMD、git bash、powershell
windows·git·bash·intellij-idea
秋说15 分钟前
【PTA数据结构 | C语言版】返回单链表 list 中第 i 个元素值
c语言·数据结构·list
孤月葬花魂20 分钟前
JavaScript 中的 Promise API 全面解析
前端·javascript
几道之旅21 分钟前
Electron 应用打包全指南
前端·javascript·electron
shushushu25 分钟前
Web如何自动播放音视频
前端·javascript
前端进阶者40 分钟前
天地图InfoWindow插入React自定义组件
前端·javascript
扶我起来还能学_42 分钟前
uniapp Android&iOS 定位权限检查
android·javascript·ios·前端框架·uni-app