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

这篇具有很好参考价值的文章主要介绍了vant van-tabs van-pull-refresh van-list 标签栏+上拉加载+下拉刷新。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

<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>

增加分页：文章来源地址https://www.toymoban.com/news/detail-643238.html

<template>
  <div class="huibj">
    <div class="listtab">

      <!--Tab 标签-->
      <van-tabs v-model="yeactive" color="#f59a23" title-active-color="#f59a23"
                @change="Tabnav">
        <van-tab v-for="(item,index) in yetabList"
                 :key="index"
                 :title="item.title"
                 :name="item.namep">
        </van-tab>
      </van-tabs>
    </div>
    <div class="ye_mxlist">
      <van-pull-refresh
        v-model="isRefresh"
        success-text="刷新成功"
        @refresh="onRefresh">
        <van-empty v-if="total == 0" description="暂无数据" />
        <van-list
          v-model="loadingMore"
          :finished="isfinished"
          finished-text="-- END --"
          @load="onLoadMore">
          <van-cell v-for="(item,index) in dataList" :key="index">
            <div class="ye_dljl_mx" @click="goyuemx(item)" style="height: 40px">
                <div class="ye_dljl">
                  <p class="ye_dljl_mc">{{item.dealReasonStr}}</p>
                  <p class="ye_dljl_sj">{{item.dealTime}}</p>
                </div>
                <div :class="item.dealType == 1 ? 'ye_jemx ye_add_je':'ye_jemx'">{{item.dealType == 1 ? '+': '-'}}
                  {{item.dealAmount/100}}
                </div>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>

//新的路径josn
import axios from '@/utils/axios';
import url from '@/ui/URL.js';
//新的路径josn end
export default {
  name: 'yemxZ',
  data() {
    return {
      //Tab 标签
      yetabList: [
        {
          title: "全部",
          name: "0"
        },
        {
          title: "收入",
          name: '1'
        },
        {
          title: "支出",
          name: '2'
        },
      ],
      yeactive: '0', //tab默认值
      //上拉加载下拉刷新
      isRefresh: false, //是否下拉刷新
      loadingMore: false,// 加载更多是否显示加载中
      isfinished: false, //	加载是否已经没有更多数据
      dataList: [],//列表
      total: 1,
      pageNum: 0,
      pageSize:10,
    };
  },
  components: {
    topnav,
  },
  mounted() {
  },
  methods: {
    //tab切换
    Tabnav() {
      this.dataList=[];
      this.pageNum=0;
      this.isfinished=false; //	加载是否已经没有更多数据
      this.backtop();
    },
    //下拉刷新
    onRefresh() {
      this.isfinished=true; //	加载是否已经没有更多数据
      this.dataList=[]; // 清空列表数据
      this.pageNum=1;
      this.getList();
    },
    //加载更多
    onLoadMore() {
      console.log('加载更多')
      this.pageNum++;
      this.getList();
    },
    // 获取列表
    getList() {
      //模拟
      // setTimeout(() => {
      //   for (let i = 0; i < 2; i++) {
      //     this.dataList.push(this.dataList.length + 1);
      //   }
      //   this.loadingMore = false;
      //   if (this.dataList.length >= 6) {
      //     this.isfinished = true;
      //   }
      // }, 1000);
      let that=this;
      let bdlx=this.yeactive == 0 ? '': this.yeactive;
      //变动类型:1收入,2支出
      let csData={
        pageNum:that.pageNum,
        pageSize:that.pageSize,
        dealType:bdlx
      };
      axios
        .ajax({
          method: 'get',
          url: url.zzzzz.xxxx,
          params:csData
        })
        .then((res) => {
          if (res.success) {
            // 加载状态结束
            this.loadingMore = false;
            this.isRefresh=false;  //是否下拉刷新
            //数据追加到列表
            if (this.pageNum > 1) {
              this.dataList = this.dataList.concat(res.data.list)
            } else {
              this.dataList = res.data.list
            }
            this.total=res.data.total;
            if (this.total <= this.dataList.length) {
              console.log("没有更多")
              this.isfinished = true
            }else{
              this.isfinished = false
            }
          } else {
            this.$toast(res.message);
          }
        });
    },
    //返回顶部
    backtop () {
      document.documentElement.scrollTop=0
    },
    //说额明细
    goyuemx(val) {
      this.$router.push('yemxxqZ');
    }
  }
};
</script>

<style scoped>

</style>

到了这里，关于vant van-tabs van-pull-refresh van-list 标签栏+上拉加载+下拉刷新的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！