小程序最强下拉刷新组件，下拉刷新这篇就够了

❝

骑着我心爱的小摩托，每天一篇技术文章，今天是：2020年08月16日，鬼哥和你一起学技术

❞

❝

Coolui Scroll基于小程序原生组件scroll-view的上拉加载下拉刷，功能强大，文档清晰，基本满足了大部分小程序下拉刷新场景需求。一起看案例。

❞

前言

基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载下拉刷新 扩展下拉刷新动画，有灵感的朋友可以丰富更多下拉动画

演示Demo

https://developers.weixin.qq.com/s/6d3MjEmI7jjW

PC端之间点击链接直接微信开发者工具打开

示例

1.弹射火箭

2.基础用法3.升级用法

4.天猫动画背景

5.京东下拉

 

6.端午安康

代码示例:

 
  
   第{{index + 1}}条内容
  
 

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.关注我们添加【前端进阶技术群】，回复：【资料包】领取前端进阶资料包