代码拉取完成,页面将自动刷新
这是一个自定义下拉刷新,上拉加载更多组件
组件分三部分,下拉刷新布局,内容布局,上拉加载更多布局,三种布局都可供开发者自定义。
在hml中写布局
<element name="refreshLoadMoreComponent" src="../../common/component/refreshloadmorecomp/refreshLoadMoreComponent.hml">
</element>
<div >
<refreshLoadMoreComponent @refresh="onRefresh">
<div slot="header">
<!--这里可以放自定义的下拉布局-->
<!--如果不写就会使用组件默认样式-->
</div>
<div slot="content">
<!--这里可以放自定义的内容显示布局-->
<list style="background-color : blueviolet;
divider-color : aliceblue; divider-height : 5px;"divider="true"
scrolleffect="no">
<list-item for="{{ list }}" style="height : 50px;">
<text>{{ $item }}</text>
</list-item>
</list>
</div>
<div slot="footer">
<!--这里可以放自定义的加载更多布局-->
<!--如果不写就会使用组件默认样式-->
</div>
</refreshLoadMoreComponent>
</div>
在js中写下拉刷新加载数据的逻辑
export default {
data: {
list: [],
},
onInit() {
for (var index = 0; index < 20; index++) {
this.list.push("原始数据::" + index)
}
},
// 下拉刷新回调
onRefresh(e) {
console.log(TAG + " onRefresh()")
setTimeout(() => {
this.list.length = 0
for (var index = 0; index < 22; index++) {
this.list.push("第" + count + "更新数据::" + index)
}
//用户通知组件下拉加载数据成功
//这里是必须写的,不然会导致下拉框一直不会自动上滑消失
e.detail.resolveFunc()
}, 2000)
}
}
自定义时,需要自定义哪个布局,就使用哪个slot,slot="header"下拉刷新布局,,slot="content"内容布局或者slot="footer"上拉加载布局
注意需写上组件的@refresh="onRefresh",定义刷新逻辑方法后,且调用e.detail.resolveFunc(),通知组件往回收下拉刷新布局
如需使用上拉加载更多,需添加组件的@load-More="onLoadMore"事件方法
<element name="refreshLoadMoreComponent" src="../../common/component/refreshloadmorecomp/refreshLoadMoreComponent.hml">
</element>
<div >
<refreshLoadMoreComponent id="refreshLoadMoreComponent" @refresh="onRefresh" @load-More="onLoadMore" @refresh-State="onRefreshState">
...
</refreshLoadMoreComponent>
</div>
js中定义onLoadMore()回调方法
onLoadMore(e) {
console.log(TAG + " onLoadMore()")
//模拟耗时操作
setTimeout(() => {
if (this.list.length > 25) {
e.detail.resolveFunc()
this.$child("refreshLoadMoreComponent").isShowLoadMoreViewFunc(false);
return;
}
this.list.push("加载数据::" + LoadCount)
LoadCount++
e.detail.resolveFunc()
}, 1000)
},
同样在回调后,都需要调用e.detail.resolveFunc(),通知回组件
属性:
header-move-offset 下拉刷新布局滑动距离
事件:
@refresh 下拉刷新回调
@load-More 上拉加载更多回调
@refresh-State 下拉刷新状态
该方法可用于自定义下拉刷新布局时,用于对下拉状态的进行不同的逻辑显示,可以通过e.detail.state可以获取状态刷新状态
refreshing | 刷新中 |
---|---|
refreshDrag | 拖拽中 |
refreshDragRelease | 拖拽释放 |
方法:
isShowLoadMoreViewFunc(boolean) 控制是否显示上拉加载更多布局 true->显示,false->不显示
SDK 6+
Copyright (c) 2021 hongzhengong
Image3DJS is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。