个人中心 | 微信开放社区

Coolui Scroll v2.0基于小程序原生组件scroll-view的上拉加载下拉刷新

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实现一些动画效果

GitHub账号

选择需要上架的开放服务

案例类型