小程序进阶-下拉刷新和上拉加载
简介
在小程序中，我们经常使用到下拉刷新和上拉加载来提升用户的体验，例如首页列表展示初始化、加载更多等。目前，有两个比较实用的方法，第一种是使用 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();
}
})
},
})