本文详细介绍了如何在微信小程序中为Tab页实现滚动加载功能。通过使用scroll-view组件的bindscrolltolower事件，结合onReachBottom函数，解决在不同页面独立加载数据的问题。同时，提到了设置scroll-view高度、scroll-y属性以及处理加载更多状态的注意事项，并提供了具体的代码示例和样式定义，帮助开发者理解和应用滚动加载功能。
原理：如果是普通页面的上拉触底事件可用小程序提供的：onReachBottom函数；
但现在是tab页，每个页面要独立进行滚动加载，这里用到了scroll-view的bindscrolltolower函数；
注意：有些童鞋自己写完之后bindscrolltolower不起作用，要注意几个点：scroll-view的高度设置没有设置，或者直接设置成100%，没有设置scroll-y="true"。
我这里也设置了100%就有效呢？因为我在它的父元素已经给了一定的高度，它在父元素里面100%才有效，而且滚动的时候也不会覆盖tab标签页头。也可以把高度设置成固定值：600px这种的，看个人需要。
<!-- 标签页 -->
<view class="tabs">
<view class="tabs-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">收入+9300</view>
<view class="tabs-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">支出-0</view>
</view>
<view class="tab-content">
<!-- 收入 -->
<scroll-view scroll-y="true" bindscrolltolower="loadIncome" class="tab-list-content {{currentTab==0?'active':''}}">
<view class="tab-list-item" wx:for="{{inList}}">
<view class="tab-list-item-detail">
<text>{{item.style}}</text>
<text class="tab-list-item-after">{{item.coin}}</text>
</view>
<view class="tab-list-item-time">{{item.time}}</view>
</view>
<view hidden="{{isHidenLoadMore}}">
<loading type="circle"></loading>
</view>
</scroll-view>
<!-- 支出 -->
<scroll-view scroll-y="true" bindscrolltolower="loadOutlay" class="tab-list-content {{currentTab==1?'active':''}}">
<view class="tab-list-item" wx:for="{{outList}}">
<view class="tab-list-item-detail">
<text>{{item.style}}</text>
<text class="tab-list-item-after">{{item.coin}}</text>
</view>
<view class="tab-list-item-time">{{item.time}}</view>
</view>
<view hidden="{{isHidenLoadMore}}">
<loading type="circle"></loading>
</view>
</scroll-view>
</view>.tabs{
display: flex;
margin: 0 24rpx;
background-color: #fff;
position: fixed;
top: 300rpx;
left: 0;
right: 0;
}
.tabs-item{
width: 50%;
text-align: center;
height: 66rpx;
line-height: 66rpx;
font-weight: bold;
}
.tabs-item.active{
border-bottom: 2px solid rgb(58, 186, 248);
color: rgb(58, 186, 248);
}
.tab-content{
background-color: #fff;
margin: 0 24rpx;
/* margin-top:368rpx; */
position: fixed;
top: 368rpx;
left: 0;
right: 0;
bottom: 0;
}
.tab-list-content{
display: none;
height: 100%;
}
.tab-list-content.active{
display: block;
}
.tab-list-item{
padding: 16rpx 24rpx;
border-bottom: 1px solid rgb(229, 246, 253);
}
.tab-list-item-detail{
display: flex;
justify-content: space-between;
}
.tab-list-item-after{
font-weight: bold;
}
.tab-list-item-time{
color: rgb(136, 136, 136);
font-size: 12px;
}// pages/me-customer/me-customer.js
Page({
/**
* 页面的初始数据
*/
data: {
isHidenLoadMore:true,
currentTab:0,
inList: [{ style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }, { style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }, { style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }, { style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }, { style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }, { style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }],
outList: [{ style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }]
},
clickTab:function(e){
var current = e.currentTarget.dataset.current;
this.setData({
currentTab: current
})
},
loadIncome:function(e){
console.log("收入");
console.log(e);
var that = this;
var maxNum = 30; //最多可加载条目
var newList = [{ style: '签到', coin: '+50', time: '01:49:46' }, { style: '分享美文', coin: '+300', time: '05:49:46' }];
var inList = that.data.inList;
if (inList.length < maxNum) {
that.setData({
isHidenLoadMore: false//显示“加载符”
});
for (let val of newList) {
inList.push(val);
};
setTimeout(function () {//模拟请求延迟个过程，实际可以不用要setTimeout
that.setData({
isHidenLoadMore: true,
inList: inList
})
}, 2000);
}
},
loadOutlay: function (e) {
console.log("支出");
console.log(e);
var that = this;
var maxNum = 30; //最多可加载条目
var newList = [{ style: '签到', coin: '-150', time: '01:49:46' }, { style: '分享美文', coin: '-600', time: '05:49:46' }];
var outList = that.data.outList;
if (outList.length < maxNum) {
that.setData({
isHidenLoadMore: false//显示“加载符”
});
for (let val of newList) {
outList.push(val);
};
setTimeout(function () {//模拟请求延迟个过程，实际可以不用要setTimeout
that.setData({
isHidenLoadMore: true,
outList: outList
})
}, 2000);
}
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
// var that = this;
// var maxNum = 30; //最多可加载条目
// var newList = [{ style: '签到', coin: '+50', time: '01:49:46' }, { style: '分享美文', coin: '+300', time: '05:49:46' }];
// var inList = that.data.inList;
// if (inList.length < maxNum) {
// that.setData({
// isHidenLoadMore: false//显示“加载符”
// });
// for (let val of newList) {
// inList.push(val);
// };
// setTimeout(function () {//模拟请求延迟个过程，实际可以不用要setTimeout
// that.setData({
// isHidenLoadMore: true,
// inList: inList
// })
// }, 2000);
// }
},
})
378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
