评论

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

基于小程序原生组件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.jsonindex.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 滚动设置

  1. 分页设置 pagination

    参数 说明 类型 默认值 版本
    page 页码 Number 1 -
    totalPage 总页码数 Number 0 -
    limit 每页显示个数 Number 0 -
    length 总个数(个数为0是,页面显示空样式) Number 0 -
  2. 空设置 empty

    参数 说明 类型 默认值 版本
    img 数据为空时显示的图片 String http://coolui.coolwl.cn/assets/mescroll-empty.png -
  3. 下拉刷新设置 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 -
  4. 上拉加载设置 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实现一些动画效果
最后一次编辑于  2020-09-20  
点赞 7
收藏
评论

15 个评论

  • admin
    admin
    2020-08-16

    试试看

    2020-08-16
    赞同 1
    回复
  • 灰是小灰灰的灰
    灰是小灰灰的灰
    11-07

    这个可以支持下拉加载更多数据么? 类似微信聊天,下拉加载下一页数据

    11-07
    赞同
    回复
  • rain
    rain
    2022-03-03

    请问3.0版本,scroll 如何定位到底部

    2022-03-03
    赞同
    回复
  • nathan
    nathan
    2022-02-03

    总数据item超过1500条后,会卡死么

    举个例子,分页加载,每页大小是100, 总共有20页,加载到最后,会不会卡死

    2022-02-03
    赞同
    回复
  • WMH
    WMH
    2021-06-10

    怎么不兼容苹果手机,苹果手机显示空白

    2021-06-10
    赞同
    回复
  • 五十风
    五十风
    2021-03-12

    empty显示有问题,现在的规则是只有上拉后才会显示empty,但页面为空的话肯定首次加载就为空了。

    另外显示empty时,下拉刷新会卡一下

    2021-03-12
    赞同
    回复
  • 2021-03-07

    为什么空数据后还能上拉,并且上拉刷新也显示了

    2021-03-07
    赞同
    回复
  • REDEMPTION
    REDEMPTION
    2021-03-05

    大佬,当我加载到最大页数时,重新下拉刷新,上拉加载就无法显示了。有什么解决方法吗

    2021-03-05
    赞同
    回复
  • Y
    Y
    2021-02-26

    真棒

    2021-02-26
    赞同
    回复
  • Ao
    Ao
    2020-12-25

    上拉加载。怎么手动取消呢??

    2020-12-25
    赞同
    回复

正在加载...

登录 后发表内容