前言
公司最近有个项目，需要做上拉加载更多的功能，大家都知道，小程序本身是没有提供上拉加载更多这个组件的，所以这个需要我们自己来实现，本来自己是打算根据onReachBottom自己做一个的，但是本着不重复造轮子(懒。。。)的态度，决定先看看有没有已经做好的，结果还真发现一个！
实现
话不多说，先上一个gif图给大家看看效果
效果大家都看见了，接下来我们看看具体是怎么实现的吧。
<view class="loadmore" hidden='{{!showThis}}' bindtap='clickLoadMore'>
<image class="icon {{showIcon?'active':''}}" src='../../img/loading.png' hidden='{{!showIcon}}'/>
<text>{{text}}</text>
</view>
wxml文件里面很简单，由一个image和一个text组成。通过showThis决定是否显示该组件，根据showIcon决定是否显示图片，功能还是比较齐全的，wxml看完了，接下来看看js文件。
Component({
// 组件的属性列表
properties: {
// 判断是否还有更多数据
hasMore: {
type: Boolean,
value: false
},
// 加载中的显示文本
loadingText: {
type: String,
value: '加载中...'
},
// 加载失败的显示文本
failText: {
type: String,
value: '加载失败, 请点击重试!'
},
// 没有更多后的显示文本, 默认没有则隐藏加载更多控件
finishText: {
type: String,
value: ''
},
// 列表渲染延时, 默认为 500 ms, 我在开发工具中测试列表渲染速度时快时慢, 可根据实际使用中界面复杂度自行调整
// ps 如果能监听setData() 渲染结束的话则可以不需要延时
listRenderingDelay: {
type: Number,
value: 500
}
},
/**
* 组件的初始数据
*/
data: {
showThis: false,
text: '',
showIcon: false,
isLoading: false
},
/**
* 组件的方法列表
*/
methods: {
//加载更多的入口方法, 直接在page中使用时请在onReachBottom() 方法中调用这个方法, 并实现loadMoreListener方法去获取数据
loadMore: function() {
console.log('properties', this.properties)
if(!this.properties.hasMore){
console.log('load more finish')
return
}
if(this.data.isLoading) {
console.log('loading ...')
return
}
this.setData({
isLoading: true
})
this.triggerEvent('loadMoreListener')
},
//加载完成, 传入hasMore
loadMoreComplete: function(data) {
var hasMore = data.curPage < data.pageCount && data.pageCount != 1
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')
}
}
})
大家也都看到了，该组件对外暴露了loadMore,loadMoreComplete,loadMoreFail,clickLoadMore四个方法。
loadMore在page中的onReachBottom() 方法中调用该方法, 并实现loadMoreListener方法去获取数据loadMoreComplete加载完成, 传入数据，注意了，这是该控件唯一需要注意的地方，当然大家也可以根据自己的数据类型做修改，里面的逻辑就是，你传入自己从接口获取到的data，他会根据data. curPage和data. pageCount来判断hasMore的值
//loadMoreComplete
该方法是整个组件的核心，大家可以根据自己的数据类型做相应的修改，或者根据自己的业务逻辑做相应的修改
loadMoreFail加载失败clickLoadMore点击 loadmore 控件时触发, 只有加载失败时才会进入页面回调方法
最后给大家看一下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: weuiLoading 0.6s steps(12, end) infinite;
}
@keyframes weuiLoading {
0% {
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
