Coolui Scroll v2.0 上拉加载下拉刷新
v2.0 版
上传至npm包可安装下载并npm构建
修改参数配置使组件使用更便捷
增加加载插槽可以自定义加载更多样式
前言
基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载下拉刷新
扩展下拉刷新动画,有灵感的朋友可以丰富更多下拉动画
组件持续更新,请关注github
在线征集
在线征集下拉刷新动画创意,你可以发草图,或者psd,AE等文件到邮箱:1003418012@qq.com. 只要想法合理立马安排demo~
组件持续更新,请关注Github
演示Demo
npm 安装 安装之后开发者工具点击npm构建
npm i coolui-scroller --production
引入
在app.json
或index.json
中引入组件
"usingComponents": {
"coolui-scroll": "coolui-scroller/index",
}
示例
基础用法
升级用法
天猫动画背景
京东下拉
弹射火箭
端午安康
天气
基础用法代码演示
页面结构
<coolui-scroll scrollOption="{{scroll}}" bindrefresh="refresh" bindloadMore="loadMore" background="#fff">
<view class="list-inner" slot="inner">
<view class="item" wx:for="{{list}}" wx:key="unique">
第{{index + 1}}条内容
</view>
</view>
</coolui-scroll>
配置 详见api
// data 中配置
scroll: {
// 设置分页信息
pagination: {
page: 1,
totalPage: 10,
limit: 10,
length: 100
},
// 设置数据为空时的图片
empty: {
img: 'http://coolui.coolwl.cn/assets/mescroll-empty.png'
},
// 设置下拉刷新
refresh: {
type: 'default',
style: 'black',
background: "#000"
},
// 设置上拉加载
loadmore: {
type: 'default',
icon: 'http://upload-images.jianshu.io/upload_images/5726812-95bd7570a25bd4ee.gif',
background: '#f2f2f2',
// backgroundImage: 'http://coolui.coolwl.cn/assets/bg.jpg',
title: {
show: true,
text: '加载中',
color: "#999",
shadow: 5
}
}
},
事件 详见api
// 加载数据
getData:function (type, page) {
// 可走后台接口
if (type == 'refresh') {
// 刷新时执行
}else{
// 加载时执行
}
},
// 下拉 刷新 页数设置1
refresh: function () {
this.getData('refresh', 1)
},
// 上拉 加载 页数设置+1
loadMore: function () {
this.getData('loadMore', this.data.scroll.pagination.page + 1)
},
// 自定义下拉刷新时执行 插槽下拉 返回的下拉进度p
refreshPulling: function (e) {
p = e.detail.p
},
API
Props
background 下拉刷新背景颜色 (如:#fff)
tip: 在写组件的时候遇到了bug 本来该设置应该放在 scrollOption.refresh 中的 不知为何出现了 下拉刷新直接穿位置到页面底部,有知道为什么的么? 目前还没有解决。
scrollOption 滚动设置
-
分页设置 pagination
参数 说明 类型 默认值 版本 page 页码 Number 1
- totalPage 总页码数 Number 0
- limit 每页显示个数 Number 0
- length 总个数(个数为0是,页面显示空样式) Number 0
- -
空设置 empty
参数 说明 类型 默认值 版本 img 数据为空时显示的图片 String http://coolui.coolwl.cn/assets/mescroll-empty.png
- -
下拉刷新设置 refresh
参数 说明 类型 默认值 版本 type 下拉样式类型,小程序默认样式或自定义 支持 default | diy
String default
- style 默认模式下样式有深色和浅色 支持 black | white
String black
- diyLevel 自定义等级,简单设置:1,插槽自定义:2 支持 1 | 2
Number - p 自定义等级2时,下拉的百分比方便自定义动画,设置0即可 Number 0
- refreshthreshold 自定义下拉高度 Number - backgroundImage 自定义下拉背景图片 String - title 自定义下拉文字 可设置 show
: 是否显示,text
: 文字内容,color
: 文字颜色,shadow
: 文字阴影范围(0时不显示)Obj - -
上拉加载设置 loadmore
参数 说明 类型 默认值 版本 type 上拉样式类型,默认样式或插槽自定义 支持 default | diy
String default
- icon 默认样式时设置图标 String - title 默认样式时设文字 可设置 show
: 是否显示,text
: 文字内容,color
: 文字颜色,shadow
: 文字阴影范围(0时不显示)Obj -
Slots
名称 | 说明 |
---|---|
inner | 加载列表内容区域 |
refresh | 下拉自定义结构 |
loadmore | 上拉自定义结构 |
Events
事件名 | 说明 | 参数 |
---|---|---|
bind:refresh | 下拉刷新成功时触发 | - |
bind:loadMore | 上拉加载成功时触发 | event.detail: 当前输入值 |
bind:refreshPulling | 下拉时触发 | event.detail.p: 下拉进度 从0开始到1, 可根据p实现一些动画效果 |
试试看
这个可以支持下拉加载更多数据么? 类似微信聊天,下拉加载下一页数据
请问3.0版本,scroll 如何定位到底部
总数据item超过1500条后,会卡死么
举个例子,分页加载,每页大小是100, 总共有20页,加载到最后,会不会卡死
怎么不兼容苹果手机,苹果手机显示空白
empty显示有问题,现在的规则是只有上拉后才会显示empty,但页面为空的话肯定首次加载就为空了。
另外显示empty时,下拉刷新会卡一下
为什么空数据后还能上拉,并且上拉刷新也显示了
大佬,当我加载到最大页数时,重新下拉刷新,上拉加载就无法显示了。有什么解决方法吗
真棒
上拉加载。怎么手动取消呢??