实现小程序上滑触底加载更多 （分页思想----）
1.组件代码（load-more文件）
load-more / index.wxml
<!-- isLogin判断是否授权登录，showThis默认一开始是不显示组件的 -->
<view hidden='{
{!isLogin}}'>
<view class="loadmore" hidden='{
{!showThis}}' bindtap='clickLoadMore'>
<!-- 图标加载 -->
<image class="icon {
{showIcon?'active':''}}" src='../../images/loading.png' hidden='{
{!showIcon}}' />
<!-- 文字显示 -->
<text>{
{text}}</text>
</view>
</view>
load-more / index.js
// components/load-more/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
hasMore: {
type: Boolean,
value: false
},
// 加载中的显示文本
loadingText: {
type: String,
value: '数据加载中...'
},
// 加载失败的显示文本
failText: {
type: String,
value: '数据加载失败, 请点击重试!'
},
// 没有更多后的显示文本, 默认没有则隐藏加载更多控件
finishText: {
type: String,
value: ''
},
// 列表渲染延时默认给500 ms
listRenderingDelay: {
type: Number,
value: 500
},
isLogin:{
type: Boolean,
value: false
}
},
/**
* 组件的初始数据
*/
data: {
showThis: false,
text: '',
showIcon: false,
isLoading: false
},
/**
* 组件的方法列表
*/
methods: {
//加载更多的入口方法,
loadMore: function() {
if(!this.properties.hasMore){
console.log('数据加载完成 ...')
// wx.showToast({
// title: '数据已加载完...',
// icon:'success',
// duration: 2000
// })
return
}
if(this.data.isLoading) {
// wx.showToast({
// title: '正在加载数据...',
// icon:'loading',
// duration: 2000
// })
console.log('正在加载数据 ...');
return
}
this.setData({
isLoading: true
})
// 向父组件通信
this.triggerEvent('loadMoreListener')
},
//加载完成, 传入hasMore
loadMoreComplete: function(hasMore) {
var text = '', showThis = false, showIcon = false
if (hasMore) {
showIcon = true
showThis = true
text = this.properties.loadingText
} else if (this.properties.finishText.length>0) {
text = this.properties.finishText
showThis = true
}
this.setData({
hasMore: hasMore,
text: text,
showIcon: showIcon,
showThis: showThis
})
//界面渲染延迟, 避免列表还未渲染完成就再次触发 loadMore 方法
setTimeout(function(){
this.setData({
isLoading: false
})
}.bind(this), this.properties.listRenderingDelay)
},
// 加载失败
loadMoreFail: function() {
this.setData({
showIcon: false,
text: this.properties.failText
})
//界面渲染延迟, 避免列表还未渲染完成就再次触发 loadMore 方法
setTimeout(function(){
this.setData({
isLoading: false
})
}.bind(this), this.properties.listRenderingDelay)
},
//点击 loadmore 控件时触发, 只有加载失败时才会进入页面回调方法
clickLoadMore: function() {
if(this.data.text != this.properties.failText) return
this.setData({
showIcon: true,
text: this.properties.loadingText,
isLoading: true
})
this.triggerEvent('clickLoadMore')
}
}
})
load-more / index.wxss
/* components/load-more/index.wxss */
.loadmore {
height: 35px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.loadmore text{
font-size: 13px;
color: #bfbfbf;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.icon{
width: 25px;
height: 25px;
margin-right: 10px;
}
.active {
animation: loading_animation 0.6s steps(12, end) infinite;
}
/* 加载动画*/
@keyframes loading_animation {
0% {
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
2.父组件中使用（引入组件的json文件就不给了）
1.index.wxml (在数据列表结构的最下方)
<load-more id="loadMoreView" hasMore="{
{hasMore}}" isLogin="{
{isLogin}}" bind:loadMoreListener='loadMoreListener' bind:clickLoadMore='clickLoadMore'></load-more>
2.index.js中
// page是全局定义的变量，默认是0
let page = 0
// onLoad()中获取子组件元素
loadMoreView = this.selectComponent("#loadMoreView")// 获取下拉触底加载更多组件
// 上滑触底函数中
onReachBottom() {
// 调用子组件事件，加载更多数据
loadMoreView.loadMore()
},
// 数据列表分页加载更多
loadMoreListener() {
page += 1
this.setData({
skipCount: maxResultCount * page
})
this.getMyProjects() //请求数据函数
},
// 获取数据列表的函数中
// 获取列表
getMyProjects(obj) {
let data = {
maxResultCount,
searchType: this.data.searchType,
skipCount: obj ? obj.skipCount : this.data.projectsList.length,
content: this.data.inputGroupNameValue,
page,
};
PostUserGroupList(data)
.then((res) => {
console.log('是否重新请求列表');
// page是从0开始的，如果最后跳转的数量大于数据总数
if (this.data.skipCount < (res.totalCount - maxResultCount) && maxResultCount < res.totalCount) {
this.setData({
hasMore: true //true时表明还有更多的数据
})
} else {
this.setData({
hasMore: false //false时表明没有下一页数据了
})
}
let projectsList_list = this.data.projectsList
let list = res.items || [];
list.forEach((item) => {
item.IsRead = false;
item.itemHeight = 0;
item.creationTime = app
.moment(item.creationTime)
.format('YYYY-MM-DD');
});
list = setUnreadMessage(list);
if (page == 0) {
projectsList_list = list
wx.stopPullDownRefresh()
} else {
projectsList_list = projectsList_list.concat(list)
}
this.setData({
projectsList: projectsList_list,
});
console.log(this.data.projectsList, '首页列表数据----');
// 如果第一页请求的数量
wx.setStorageSync('projectList', this.data.projectsList);
// 调用子组件的加载完成事件
loadMoreView.loadMoreComplete(this.data.hasMore)
// 获取元素高度
this.setListEventHeight();
})
.catch((err) => {
if (page != 0) {
// 调用子组件的加载失败事件
loadMoreView.loadMoreFail()
}
});
},
// 父组件中的点击加载图标时重新加载数据
// 数据加载失败时，点击重新加载
clickLoadMore() {
this.getMyProjects() //请求数据
},