ios微信小程序下拉刷新怎么配_[wx]微信小程序自定义下拉刷新

需求：

在小程序内存在列表等形式的页面内增加下拉刷新功能，提高用户体验感，加强界面操作与交互性；

实现方法：

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