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

Slots

Events

干货

github地址.