基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载下拉刷新
扩展下拉刷新动画,有灵感的朋友可以丰富更多下拉动画
在app.json
或index.json
中引入组件
"usingComponents": {
"coolui-scroll": "./dist/scroll/index"
}
<coolui-scroll
page="{{scroll.page}}"
totalPage="{{scroll.totalPage}}"
bindupper="upper"
bindlower="lower"
isEmpty="{{list.length}}"
height="{{scroll.height}}"
>
<view class="list-inner" slot="inner">
<!-- 循环内容 -->
<view class="item" wx:for="{{tmList}}" wx:key="unique">
第{{index + 1}}条内容
</view>
<!-- 循环内容 -->
</view>
</coolui-scroll>
// 配置
scroll: {
page: 1,
totalPage: 10,
emptyImg: 'http://coolui.coolwl.cn/assets/mescroll-empty.png'
},
// 模拟数据
let listData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// 加载数据
onShow: function () {
// 页面加载时执行一次加载
this.getData('refresh', 1)
},
getData: function (type, page) {
let that = this
let list = that.data.list;
if (type == 'refresh') {
let scroll = that.data.scroll
scroll.page = page
setTimeout(() => {
that.setData({
list: listData,
scroll: scroll
});
}, 300);
} else {
let scroll = that.data.scroll
scroll.page = page
setTimeout(() => {
if (that.data.scroll.page <= that.data.scroll.totalPage) {
that.setData({
list: list.concat(listData),
scroll: scroll
});
}
}, 1000);
}
},
// 下拉刷新
refresh: function () {
this.getData('refresh', 1)
},
// 上拉加载
loadMore: function () {
this.getData('loadMore', this.data.scroll.page + 1)
},
<coolui-scroll refreshStyle="black" refreshBackground="#f2f2f2" ></coolui-scroll>
<coolui-scroll type="diy" ></coolui-scroll>
<coolui-scroll type="diy" refreshthreshold="{{90}}" ></coolui-scroll>
<coolui-scroll type="diy" refreshBackgroundImage="http://coolui.coolwl.cn/assets/tm_mui_bike.gif" ></coolui-scroll>
<coolui-scroll type="diy" refreshColor"#fff"></coolui-scroll>
<coolui-scroll type="diy" refreshBackgroundImage="http://coolui.coolwl.cn/assets/tm_mui_bike.gif" refreshTitleShow="{{false}}"></coolui-scroll>
<coolui-scroll type="diy" refreshDiy="{{true}}">
<view class="refresh" slot="refresh">
下拉加载
</view>
</coolui-scroll>
参数 |
说明 |
类型 |
默认值 |
版本 |
page |
页码 |
Number |
1 |
- |
totalPage |
总页码数 |
Number |
1 |
- |
isEmpty |
数据是否为空,传入列表的长度:list.length |
Number |
0 |
- |
emptyImg |
数据是否为空时显示的图片 |
string |
无 |
- |
scrollHeight |
滚动列表高度,默认为 100% ,随外层结构高度变化 |
string |
100% |
- |
type |
是否开启自定义开启则设置diy |
string |
default |
- |
refreshDiy |
是否开启深度自定义,自定义下拉结构及动画,需开启自定义,使用插槽自定义 |
boolean |
false |
- |
refreshStyle |
设置默认下拉刷新的原点颜色 |
string |
#f2f2f2 |
- |
refreshBackground |
设置默认下拉刷新的背景颜色,支持`black |
white` |
string |
black |
refreshthreshold |
设置下拉刷新高度 |
Number |
45 |
- |
refreshBackgroundImage |
设置自定义下拉刷新的背景图片图片路径,开启自定义才设置有效 |
string |
无 |
- |
refreshTitleShow |
设置是否显示自定义下拉刷新的文字,开启自定义才设置有效 |
boolean |
true |
- |
refreshColor |
设置自定义下拉刷新的文字颜色,开启自定义才设置有效 |
string |
#999999 |
- |
名称 |
说明 |
inner |
加载列表内容区域 |
refresh |
下拉自定义结构 |
事件名 |
说明 |
参数 |
bind:refresh |
下拉刷新成功时触发 |
- |
bind:loadMore |
上拉加载成功时触发 |
event.detail: 当前输入值 |
bind:refreshPulling |
下拉时触发 |
event.detail.p: 下拉进度 从0开始到1, 可根据p实现一些动画效果 |