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

缺乏、安全感 2022-11-28 10:47 468阅读 0赞

![format_png][]

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

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

### 前言 ###

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

### 演示Demo ###

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

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

### 示例 ###

1.弹射火箭![format_png 1][]

2.基础用法![format_png 2][]3.升级用法

![format_png 3][]

4.天猫动画背景![format_png 4][]

5.京东下拉![format_png 5][]

6.端午安康![format_png 6][]

### 代码示例: ###

<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>

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

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>page</td> 
   <td>页码</td> 
  </tr> 
  <tr> 
   <td>totalPage</td> 
   <td>总页码数</td> 
  </tr> 
  <tr> 
   <td>limit</td> 
   <td>每页显示个数</td> 
  </tr> 
  <tr> 
   <td>length</td> 
   <td>总个数(个数为0是,页面显示空样式)</td> 
  </tr> 
 </tbody> 
</table>

2.空设置 empty

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>img</td> 
   <td>数据为空时显示的图片</td> 
  </tr> 
 </tbody> 
</table>

3.下拉刷新设置 refresh

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>下拉样式类型,小程序默认样式或自定义 支持 default</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td>默认模式下样式有深色和浅色 支持 black</td> 
  </tr> 
  <tr> 
   <td>diyLevel</td> 
   <td>自定义等级,简单设置：1,插槽自定义：2 支持 1</td> 
  </tr> 
  <tr> 
   <td>p</td> 
   <td>自定义等级2时,下拉的百分比方便自定义动画,设置0即可</td> 
  </tr> 
  <tr> 
   <td>refreshthreshold</td> 
   <td>自定义下拉高度</td> 
  </tr> 
  <tr> 
   <td>backgroundImage</td> 
   <td>自定义下拉背景图片</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>自定义下拉文字 可设置 show: 是否显示, text: 文字内容, color: 文字颜色, shadow: 文字阴影范围(0时不显示)</td> 
  </tr> 
 </tbody> 
</table>

4.上拉加载设置 loadmore

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>上拉样式类型,默认样式或插槽自定义 支持 default</td> 
  </tr> 
  <tr> 
   <td>icon</td> 
   <td>默认样式时设置图标</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>默认样式时设文字 可设置 show: 是否显示, text: 文字内容, color: 文字颜色, shadow: 文字阴影范围(0时不显示)</td> 
  </tr> 
 </tbody> 
</table>

### Slots ###

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>inner</td> 
   <td>加载列表内容区域</td> 
  </tr> 
  <tr> 
   <td>refresh</td> 
   <td>下拉自定义结构</td> 
  </tr> 
  <tr> 
   <td>loadmore</td> 
   <td>上拉自定义结构</td> 
  </tr> 
 </tbody> 
</table>

### Events ###

<table> 
 <thead> 
  <tr> 
   <th>事件名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>bind:refresh</td> 
   <td>下拉刷新成功时触发</td> 
  </tr> 
  <tr> 
   <td>bind:loadMore</td> 
   <td>上拉加载成功时触发</td> 
  </tr> 
  <tr> 
   <td>bind:refreshPulling</td> 
   <td>下拉时触发</td> 
  </tr> 
 </tbody> 
</table>

仓库地址：

https://www.npmjs.com/package/coolui-scroller

### 最后微信搜一搜【`前端人`】关注鬼哥，关注后回复【`资料`】有我准备的一线大厂面试资料和简历模板，希望大家都能找到心仪的工作，关注后回复【`加群`】，和前端大军一起前端进阶 ###

[format_png]: /images/20221124/3f4267eb19a9465c8db6b338dbd31dda.png
[format_png 1]: /images/20221124/10eddc6877844175be36d74889b58d12.png
[format_png 2]: /images/20221124/f50c6bc3bcaa4069aaaa4f2127d57338.png
[format_png 3]: /images/20221124/355b66d8d3b0468189517f16bb78bcb0.png
[format_png 4]: /images/20221124/7e128e42583845df84081ca68549da0f.png
[format_png 5]: /images/20221124/36a637d915174d229a65f91691ac4984.png
[format_png 6]: /images/20221124/f8a5503467ca4035bcde6f5558c397a9.png