小程序进阶-下拉刷新和上拉加载

简介

在小程序中，我们经常使用到下拉刷新和上拉加载来提升用户的体验，例如首页列表展示初始化、加载更多等。目前，有两个比较实用的方法，第一种是使用 scroll-view 组件，第二种是使用 onPullDownRefresh 和 onReachBottom整个页面的刷新。

scroll-view

• 可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
• WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
• scroll-view使用bindscrolltoupper和bindscrolltolower属性，设置下拉动作触发的事件。
• scroll-view可以结合 WXS 事件响应 开发交互动画
  index.wxml

<wxs module="refresh">
module.exports = {
  onPulling: function(evt, instance) {
    var p = Math.min(evt.detail.dy / 80, 1)   //获取下拉高度和阈值的比值
    console.log(p)
    var view = instance.selectComponent('.refresh-container')
    view.setStyle({
      opacity: p,	//透明度
      transform: "scale(" + p + ")"		//2D 缩放转换，按比例缩放
    })
  }
}
</wxs>

自定义交互动画：
<scroll-view
  scroll-y style="width: 100%; height: 400px;"   //纵向滚动
  refresher-enabled="{{true}}"					//开启自定义下拉刷新
  refresher-threshold="{{80}}"					//设置自定义下拉刷新阈值	
  refresher-default-style="none"				//设置自定义下拉刷新默认样式，支持设置 
  refresher-background="lightgreen"				//设置自定义下拉刷新区域背景颜色
  bindrefresherpulling="{{refresh.onPulling}}"  //自定义下拉刷新控件被下拉
>
  <view slot="refresher" class="refresh-container"
    style="display: block; width: 100%; height: 80px; background: blue; display: flex; align-items: center;"
  >
    <view class="view1" style="position: absolute; text-align: center; width: 100%;">
      下拉刷新
    </view>
  </view>

  <view wx:for="{{arr}}" style="display: flex; height: 100px;">
    <image src="https://images.unsplash.com/photo-1565699894576-1710004524ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1832&q=80"></image>
    <image src="https://images.unsplash.com/photo-1566402441483-c959946717ed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"></image>
    <image src="https://images.unsplash.com/photo-1566378955258-7633cb5c823e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"></image>
    <image src="https://images.unsplash.com/photo-1566404394190-cda8c6209208?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=630&q=80"></image>
    <image src="https://images.unsplash.com/photo-1566490595448-be523b4d2914?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=958&q=80"></image>
    </view>
</scroll-view>


默认交互动画：
<scroll-view
  scroll-y style="width: 100%; height: 400px;"
  refresher-enabled="{{true}}"				//开启自定义下拉刷新
  refresher-threshold="{{100}}"				//设置自定义下拉刷新阈值
  refresher-default-style="white"			//设置自定义下拉刷新默认样式，支持设置
  refresher-background="lightgreen"			//设置自定义下拉刷新区域背景颜色
  refresher-triggered="{{triggered}}"		//设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发	
  bindrefresherpulling="onPulling"			//自定义下拉刷新控件被下拉
  bindrefresherrefresh="onRefresh"			//自定义下拉刷新被触发
  bindrefresherrestore="onRestore"			//自定义下拉刷新被复位
  bindrefresherabort="onAbort"				//自定义下拉刷新被中止
  bindscrolltoupper="upper"					//滚动到顶部/左边时触发
  bindscrolltolower="lower"					//滚动到底部/右边时触发	
>
  <view wx:for="{{arr}}" style="display: flex; height: 100px;">
    <image src="https://images.unsplash.com/photo-1565699894576-1710004524ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1832&q=80"></image>
    <image src="https://images.unsplash.com/photo-1566402441483-c959946717ed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"></image>
    <image src="https://images.unsplash.com/photo-1566378955258-7633cb5c823e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"></image>
    <image src="https://images.unsplash.com/photo-1566404394190-cda8c6209208?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=630&q=80"></image>
    <image src="https://images.unsplash.com/photo-1566490595448-be523b4d2914?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=958&q=80"></image>
    </view>
</scroll-view>

index.js

const app = getApp()
Page({
  data: {
    arr: [],
    triggered: false,
  },
  onReady: function () {
    const arr = []
    for (let i = 0; i < 100; i++) arr.push(i)
    this.setData({
      arr
    })

    setTimeout(() => {
      this.setData({
        triggered: true,   //当前下拉刷新状态
      })
    }, 10000)
  },

  //自定义下拉刷新控件被下拉
  onPulling(e) {
    console.log('onPulling:', e)
  },
  //自定义下拉刷新被触发
  onRefresh() {
    if (this._freshing) return
    this._freshing = true
    setTimeout(() => {
      this.setData({
        triggered: false,
      })
      this._freshing = false
    }, 3000)
  },
  //自定义下拉刷新被复位
  onRestore(e) {
    console.log('onRestore:', e)
  },
  //自定义下拉刷新被中止
  onAbort(e) {
    console.log('onAbort', e)
  },
  upper(e) {
    console.log("upper：",e)
  },
  lower(e) {
    console.log("lower：",e)
  }
})

onPullDownRefresh 和onReachBottom

• onPullDownRefresh 和onReachBottom属于Page的配置方法。
• onPullDownRefresh 监听用户下拉动作，需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
• onReachBottom 页面上拉触底事件的处理函数，可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。在触发距离内滑动期间，本事件只会被触发一次。

index.json

{
  "enablePullDownRefresh": true,  //开启下拉刷新
  "onReachBottomDistance":50,	 //设置滑动触发距离
  "disableScroll": false		//设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置
}

index.js

//index.js
//获取应用实例
const app = getApp() 

Page({
  data: {
  	dataList:[]
  },
  onLoad: function (e) {
   },
   onShow: function () {
   },
   onPullDownRefresh: function () {
    // 显示顶部刷新图标  
    wx.showNavigationBarLoading();
    var that = this;
    wx.request({
      url: 'https://xxx',
      method: "POST",
      data:{
            page : page,
            page_size : page_size,
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        that.setData({
          dataList: res.data.data
        });
        // 隐藏导航栏加载框  
        wx.hideNavigationBarLoading();
        // 停止下拉动作  
        wx.stopPullDownRefresh();
      }
    })
  },
   onReachBottom: function () {
    var that = this;
    // 显示加载图标  
    wx.showLoading({
      title: '加载中...',
    })
    page++;;
    wx.request({
      url: 'https://xxx/'，
      method: "POST",
      data:{
            page : page,
            page_size : page_size,
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        // 回调函数  
        var dataList= that.data.dataList;
        for (var i = 0; i < res.data.data.length; i++) {
          dataList.push(res.data.data[i]);
        }
        // 设置数据  
        that.setData({
          dataList: dataList
        })
        // 隐藏加载框  
        wx.hideLoading();
      }
    })
  },
})