Scroll 上拉加载下拉刷新

前言

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

引入

在app.json或index.json中引入组件

"usingComponents": {
  "coolui-scroll": "./dist/scroll/index"
}

示例

基础用法

升级用法

天猫动画背景

京东下拉

基础用法代码演示

基础用法页面结构

<coolui-scroll
  page="{{scroll.page}}"
  totalPage="{{scroll.totalPage}}"
  bindupper="upper"
  bindlower="lower"
  isEmpty="{{list.length}}"
  height="{{scroll.height}}"
>
  <view class="list-inner" slot="inner">
    <!-- 循环内容 -->
    <view class="item" wx:for="{{tmList}}" wx:key="unique">
      第{{index + 1}}条内容
    </view>
    <!-- 循环内容 -->
  </view>
</coolui-scroll>

基础用法配置

// 配置
scroll: {
  page: 1,
  totalPage: 10,
  emptyImg: 'http://coolui.coolwl.cn/assets/mescroll-empty.png'
},

数据加载

// 模拟数据
let listData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// 加载数据
onShow: function () {
    // 页面加载时执行一次加载
    this.getData('refresh', 1)
},
getData: function (type, page) {
  let that = this
  let list = that.data.list;
  if (type == 'refresh') {
    let scroll = that.data.scroll
    scroll.page = page
    setTimeout(() => {
      that.setData({
        list: listData,
        scroll: scroll
      });
    }, 300);
  } else {
    let scroll = that.data.scroll
    scroll.page = page
    setTimeout(() => {
      if (that.data.scroll.page <= that.data.scroll.totalPage) {
        that.setData({
          list: list.concat(listData),
          scroll: scroll
        });
      }
    }, 1000);
  }
},

下拉刷新方法

// 下拉刷新
refresh: function () {
  this.getData('refresh', 1)
},

上拉加载方法

// 上拉加载
loadMore: function () {
  this.getData('loadMore', this.data.scroll.page + 1)
},

设置下拉刷新样式

<coolui-scroll refreshStyle="black" refreshBackground="#f2f2f2" ></coolui-scroll>

自定义下拉刷新

开启自定义

<coolui-scroll type="diy" ></coolui-scroll>

设置下拉高度

<coolui-scroll type="diy" refreshthreshold="{{90}}" ></coolui-scroll>

设置下拉刷新背景图片(可设置动图)

<coolui-scroll type="diy" refreshBackgroundImage="http://coolui.coolwl.cn/assets/tm_mui_bike.gif" ></coolui-scroll>

可设置下拉刷新文字颜色

<coolui-scroll type="diy" refreshColor"#fff"></coolui-scroll>

可取消下拉加载文字只显示图片

<coolui-scroll type="diy" refreshBackgroundImage="http://coolui.coolwl.cn/assets/tm_mui_bike.gif" refreshTitleShow="{{false}}"></coolui-scroll>

可自定义下拉刷新结构

<coolui-scroll type="diy" refreshDiy="{{true}}">
  <view class="refresh" slot="refresh">
    下拉加载
  </view>
</coolui-scroll>

API

Props

参数	说明	类型	默认值	版本
page	页码	Number	1	-
totalPage	总页码数	Number	1	-
isEmpty	数据是否为空,传入列表的长度:list.length	Number	0	-
emptyImg	数据是否为空时显示的图片	string	无	-
scrollHeight	滚动列表高度，默认为 100%,随外层结构高度变化	string	100%	-
type	是否开启自定义开启则设置diy	string	default	-
refreshDiy	是否开启深度自定义,自定义下拉结构及动画,需开启自定义,使用插槽自定义	boolean	false	-
refreshStyle	设置默认下拉刷新的原点颜色	string	#f2f2f2	-
refreshBackground	设置默认下拉刷新的背景颜色,支持black | white	string	black	-
refreshthreshold	设置下拉刷新高度	Number	45	-
refreshBackgroundImage	设置自定义下拉刷新的背景图片图片路径,开启自定义才设置有效	string	无	-
refreshTitleShow	设置是否显示自定义下拉刷新的文字,开启自定义才设置有效	boolean	true	-
refreshColor	设置自定义下拉刷新的文字颜色,开启自定义才设置有效	string	#999999	-

Slots

名称	说明
inner	加载列表内容区域
refresh	下拉自定义结构

Events

事件名	说明	参数
bind:refresh	下拉刷新成功时触发	-
bind:loadMore	上拉加载成功时触发	-
bind:refreshPulling	下拉时触发	event.detail.p: 下拉进度 从0开始到1, 可根据p实现一些动画效果

干货

github地址.