微信小程序基于scroll-view组件的下拉刷新,上拉加载更多的功能实现
在页面json(本例如index.json)文件中配置:
{
"usingComponents": {
"component-scroll": "../component/component-scroll/index"
}
}
在页面wxml(本例如index.wxml)文件中:
<view class='container'>
<component-scroll isNeedLoadmore bind:_loadmore="loadmore" bind:_refresh="refresh" allloaded="{{allloaded}}" isEmpty="{{!loading &&list.length<=0}}">
<view class='list'>
<block wx:for="{{list}}" wx:key="{{index}}">
<view class='list-item'>{{item.name}}</view>
</block>
</view>
</component-scroll>
</view>
- isNeedLoadmore —— 是否需要加载更多
- refresh —— 绑定下拉刷新事件
- loadmore —— 绑定加载更多事件
- allloaded —— 判断是否已经加载完毕
- isEmpty —— 判断页面是否为空
- pulldownDistance —— 下拉多少距离触发刷新事件
- refreshPulldownText —— 下拉动作时的提示文字,如“下拉刷新”
- refreshUndoText —— 松开动作的提示文字,如“释放刷新”
- refreshLoadingText —— 下拉刷新加载中的文字提示
- loadmoreLoadingText —— 底部加载更多的文字提示
- loadmoreAllloadedText —— 底部记载完毕的文字提示
在页面js( 本例如index.js)文件中: 配置loadmore,refresh事件
data: {
page: 0,
size: 10,
loading: false,
allloaded: false,
list: []
},
// 加载更多
loadmore({
detail
}) {
this.getList().then(res => {
detail.success();
});
},
// 刷新
refresh({
detail
}) {
this.setData({
list: [],
loading: false,
allloaded: false,
page: 0
})
this.getList().then(res => {
detail.success();
});
},
getList() {
return new Promise((resolve, reject) => {
if (this.data.loading || this.data.allloaded) {
resolve();
return;
}
this.setData({
loading: true
})
setTimeout(() => {
// 此处为虚拟数据
let resData = [].concat(JSON.parse(JSON.stringify(list)));
let addList = resData.slice(this.data.size * this.data.page, (this.data.page + 1) * this.data.size);
let newList = this.data.list.concat(addList)
if (addList.length < this.data.size) {
this.setData({
allloaded: true
})
}
this.setData({
list: newList,
loading: false,
page: this.data.page + 1
})
resolve();
}, 500)
})
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent