需求:
在小程序内存在列表等形式的页面内增加下拉刷新功能,提高用户体验感,加强界面操作与交互性;
实现方法:
1、小程序提供的下拉刷新(无法自定义刷新动画)
在页面设置内开启下拉(单独页面设置);
{
"enablePullDownRefresh": true,
}
使用onPullDownRefresh()监听用户下拉操作,实现刷新操作;
也可以通过wx.startPullDownRefresh和wx.stopPullDownRefresh触发和关闭页面下拉刷新;
可能遇到的问题:
1)下拉时没有出现刷新的点点动画
可能是因为设置的页面背景色与点点动画一致导致无法看到动画,可以在页面配置中配置背景文字颜色:
{
"backgroundTextStyle": "dark"
}
2、scroll-view内refresher-enabled属性开启自定义刷新
基本库要求:2.10.1
refresher-enabled
boolean
false
否
开启自定义下拉刷新
refresher-threshold
number
45
否
设置自定义下拉刷新阈值
refresher-default-style
string
"black"
否
设置自定义下拉刷新默认样式,支持设置 black/white/none, none 表示不使用默认样式
refresher-background
string
"#FFF"
否
设置自定义下拉刷新区域背景颜色
refresher-triggered
boolean
false
否
设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发
bindrefresherpulling
eventhandle
否
自定义下拉刷新控件被下拉
bindrefresherrefresh
eventhandle
否
自定义下拉刷新被触发
bindrefresherrestore
eventhandle
否
自定义下拉刷新被复位
bindrefresherabort
eventhandle
否
自定义下拉刷新被中止
3、原始scroll-view自定义下拉实现(为兼容2.10.1一下的下拉刷新
通过监听手指移动距离控制需要下拉模块的下拉距离,主要事件bindtouchstart,bindtouchmove和bindtouchend,bindtouchmove记录手指开始下拉时的起始位置,bindtouchmove计算下拉距离,bindtouchend判断并实现刷新方法。
我的自定义下拉组件(Taro框架)
import Taro, { Component, render } from "@tarojs/taro";
import { View, Image, ScrollView } from "@tarojs/components";
import { getGlobalData } from "../../state/global";
import util from "../../utils";
import "./index.less";
const rpx2px = util.rpx2px();
export default class Loading extends C