Scroll 上拉加载下拉刷新 已更新2.0版本 地址：https://developers.weixin.qq.com/community/develop/article/doc/000a00925744f06af6ca00a7651c13 注意 由于基于scroll-view的下拉刷新实现的 所有 基础库版本需要2.10.1以上否则下拉刷新不好使 在线征集 在线征集下拉刷新动画创意,你可以发草图,或者psd,AE等文件到邮箱：1003418012@qq.com. 只要想法合理立马安排demo~ 前言 基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载下拉刷新 扩展下拉刷新动画，有灵感的朋友可以丰富更多下拉动画 想增加canvas动画发现下拉时候卡的一b，不知如何处理~ 引入 在[代码]app.json[代码]或[代码]index.json[代码]中引入组件 [代码]"usingComponents": { "coolui-scroll": "./dist/scroll/index" } [代码] 示例 基础用法 [图片] 升级用法 [图片] 天猫动画背景 [图片] 京东下拉 [图片] 弹射火箭 [图片] 端午安康 [图片] 基础用法代码演示 基础用法页面结构 [代码] 第{{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> [代码] 自定义下拉刷新 开启自定义 [代码]/coolui-scroll> [代码] 设置下拉高度 [代码]/coolui-scroll> [代码] 设置下拉刷新背景图片(可设置动图) [代码]/coolui-scroll> [代码] 可设置下拉刷新文字颜色 [代码]/coolui-scroll> [代码] 可取消下拉加载文字只显示图片 [代码]/coolui-scroll> [代码] 可自定义下拉刷新结构 [代码] 下拉加载 /view> /coolui-scroll> [代码] API Props 参数 说明 类型 默认值 版本 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[代码] - Slots 名称 说明 inner 加载列表内容区域 refresh 下拉自定义结构 Events 事件名 说明 参数 bind:refresh 下拉刷新成功时触发 - bind:loadMore 上拉加载成功时触发 - bind:refreshPulling 下拉时触发 event.detail.p: 下拉进度 从0开始到1, 可根据p实现一些动画效果 干货 github地址.