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

❝

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

❞

❝

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

❞

前言

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

演示Demo

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

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

示例

1.弹射火箭

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

4.天猫动画背景

5.京东下拉

 

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

2.空设置 empty

3.下拉刷新设置 refresh

4.上拉加载设置 loadmore

Slots

Events

仓库地址：

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

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