❝骑着我心爱的小摩托，每天一篇技术文章，今天是：2020年08月16日，
鬼哥和你一起学技术❞
❝❞
Coolui Scroll基于小程序原生组件scroll-view的上拉加载下拉刷，功能强大，文档清晰，基本满足了大部分小程序下拉刷新场景需求。一起看案例。
前言
基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载下拉刷新 扩展下拉刷新动画，有灵感的朋友可以丰富更多下拉动画
演示Demo
https://developers.weixin.qq.com/s/6d3MjEmI7jjW
PC端之间点击链接直接微信开发者工具打开
示例
1.弹射火箭
2.基础用法3.升级用法
4.天猫动画背景
5.京东下拉
6.端午安康
代码示例:
<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>
Page({
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',
title: {
show: true,
text: '加载中',
color: "#999",
shadow: 5
}
}
},
}
})
Page({
// 加载数据
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 滚动设置
❞
1.分页设置 pagination
| 参数 | 说明 |
|---|---|
| page | 页码 |
| totalPage | 总页码数 |
| limit | 每页显示个数 |
| length | 总个数(个数为0是,页面显示空样式) |
2.空设置 empty
| 参数 | 说明 |
|---|---|
| img | 数据为空时显示的图片 |
3.下拉刷新设置 refresh
| 参数 | 说明 |
|---|---|
| type | 下拉样式类型,小程序默认样式或自定义 支持 default |
| style | 默认模式下样式有深色和浅色 支持 black |
| diyLevel | 自定义等级,简单设置：1,插槽自定义：2 支持 1 |
| p | 自定义等级2时,下拉的百分比方便自定义动画,设置0即可 |
| refreshthreshold | 自定义下拉高度 |
| backgroundImage | 自定义下拉背景图片 |
| title | 自定义下拉文字 可设置 show: 是否显示, text: 文字内容, color: 文字颜色, shadow: 文字阴影范围(0时不显示) |
4.上拉加载设置 loadmore
| 参数 | 说明 |
|---|---|
| type | 上拉样式类型,默认样式或插槽自定义 支持 default |
| icon | 默认样式时设置图标 |
| title | 默认样式时设文字 可设置 show: 是否显示, text: 文字内容, color: 文字颜色, shadow: 文字阴影范围(0时不显示) |
Slots
| 名称 | 说明 |
|---|---|
| inner | 加载列表内容区域 |
| refresh | 下拉自定义结构 |
| loadmore | 上拉自定义结构 |
Events
| 事件名 | 说明 |
|---|---|
| bind:refresh | 下拉刷新成功时触发 |
| bind:loadMore | 上拉加载成功时触发 |
| bind:refreshPulling | 下拉时触发 |
仓库地址：
https://www.npmjs.com/package/coolui-scroller
最后：
鬼哥我只能说，非常优秀的组件，作者也在持续迭代中，基本上小程序下拉刷新这块的需求都稳了，感谢作者的付出!
❤️ 优秀的你们，看完两件事
如果你觉得这篇内容对你挺有启发，我想邀请你帮我两个小忙：
1.点个「在看」，让更多的人也能看到这篇内容
2.关注我们添加【前端进阶技术群】，回复：【资料包】领取前端进阶资料包