一,实现的效果
二,实现的思路
<van-tabs v-model="active" line-width="33%">
<van-tab title="全部">
<van-list
v-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-list
v-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-list
v-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-list
v-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-list
v-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-list
v-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=10
this.pageCurrent=1
this.renderList=[]
switch (newval) {
case 0:
this.navSelected=0
this.finished_1=false
break;
case 1:
this.navSelected=1
this.finished_2=false
break;
default:
this.navSelected=2
this.finished_3=false
break;
}
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,导致的滚动条事件触发load
return
}
this.pageCurrent++
this.getList()
},
/**
* 获取列表数据
*/
getList () {
var that=this
let params = {
TXCODE: 'VAT210', //功能编号
token: localStorage.getItem('localToken'), //token
userId: localStorage.getItem('cidNo'), //用户id
campusId: localStorage.getItem('campusId'), //园区id
fcnNo: 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=loading
this.finished_1=finished
break;
case 1:
this.loading_2=loading
this.finished_2=finished
break;
default:
this.loading_3=loading
this.finished_3=finished
break;
}
}
}
}
</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>