vant-ui的list

一，实现的效果

二，实现的思路

 <van-tabs v-model="active" line-width="33%"><van-tab title="全部"><van-listv-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-listv-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-listv-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-listv-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-listv-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-listv-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=10this.pageCurrent=1this.renderList=[]switch (newval) {case 0:this.navSelected=0this.finished_1=falsebreak;case 1:this.navSelected=1this.finished_2=falsebreak;default:this.navSelected=2this.finished_3=falsebreak;}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，导致的滚动条事件触发loadreturn}this.pageCurrent++this.getList()},/*** 获取列表数据*/getList () {var that=thislet params = {TXCODE: 'VAT210',                            //功能编号token: localStorage.getItem('localToken'),   //tokenuserId: localStorage.getItem('cidNo'),       //用户idcampusId: localStorage.getItem('campusId'),  //园区idfcnNo: 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=loadingthis.finished_1=finishedbreak;case 1:this.loading_2=loadingthis.finished_2=finishedbreak;default:this.loading_3=loadingthis.finished_3=finishedbreak;}}}
}
</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>

vant-ui的list相关推荐

vant显示日期格式_Vue+Vant ui实现日期时间选择
Vue+Vant ui实现日期时间选择 1.安装Vant ui npm i vant -S 2.在 main.js 中引入 Vant ui // 引入vant import Vant from 'va ...
Vue2 - 网易云音乐项目笔记（基于Vant UI组件库）
目录一.项目技术二.准备工作 1.初始化Vue项目 2.配置Vant UI组件库 3.下载并使用vue-router库 4.接口API 5.postcss插件三.分析页面实现功能 1.路由页面准 ...
Vue2：使用Vant UI实现网易云评论页上拉和下拉刷新
目录一.项目数据API接口地址二.实现页面效果三.实现思路四.实现思路代码 1.发送ajax请求获取20条评论 2.下拉触发onRefresh事件 3.上拉触发onLoad事件五.实现功能完 ...
【实战项目惜时App需求分析说明书】Vue-cli3+Vant UI+Vue-element-admin+Egg.js+Mysql
小编的第二个全栈项目,接下来会继续推出其中的源码设计和功能分析博客,大家多多支持呀! 项目源码地址: https://gitee.com/lwkgood/time-client (客户端) https ...
uniapp使用Vant ui
uniapp项目中如何使用Vant ui uniapp常用框架有很多,例如uview,colorUI,当然还有dcloud团队打造的插件库等等.一般手机App开发使用这些框架或者组件库已经足够了.但是 ...
【vant ui 双向输入框禁止手机键盘弹出】
vant ui 双向输入框禁止手机键盘弹出 <van-field readOnly @focus="noBomBox" :formatter="formatterN ...
Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（登录注册页面，验证码）
基于 Vue3.x + Vant UI 的多功能记账本(四) 文章目录基于 Vue3.x + Vant UI 的多功能记账本(四) 项目演示 1.登录注册页面 2.图片验证码 3.修改 axios ...
vue h5 端实现富文本图片预览（基于 Vant UI 的 ImagePreview 组件）
文章目录 vue h5 端实现富文本图片预览(基于 Vant UI 的 ImagePreview 组件) 预览效果关键代码使用案例 vue h5 端实现富文本图片预览(基于 Vant UI 的 I ...
Vant UI使用iconfont自定义图标
在使用Vant UI做h5页面时,不可避免的会使用到各种小图标,但是Vant 官方提供的图标是有限的,考虑到这种情况,vant也提供了一种方法去自定义图标,自定义图标.可能有些同学看到这里也是一头雾水 ...
vue-cli3+ 、vant UI、移动端适配
前言:一直用的vue-cli2,趁着不忙,记录下使用cli3+的点滴. 如果帮助到了你,还请点个赞!!!!! 1.nodejs 具体下载安装不在赘述:详见菜鸟教程--nodeJs安装或者官网:no ...

vant-ui的list

一，实现的效果

二，实现的思路

三，总的代码：

vant-ui的list相关推荐

最新文章

热门文章