Coolui Scroll v2.0 上拉加载下拉刷新 v2.0 版 上传至npm包可安装下载并npm构建 修改参数配置使组件使用更便捷 增加加载插槽可以自定义加载更多样式 前言 基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载下拉刷新 扩展下拉刷新动画，有灵感的朋友可以丰富更多下拉动画 组件持续更新,请关注github 在线征集 在线征集下拉刷新动画创意,你可以发草图,或者psd,AE等文件到邮箱：1003418012@qq.com. 只要想法合理立马安排demo~ 组件持续更新,请关注Github https://github.com/wzs28150/coolui-scroller 演示Demo https://developers.weixin.qq.com/s/KmYdwMmX7hjV 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实现一些动画效果