<scroll-view v-if="index == idx" scroll-y="true" refresher-enabled="true" refresher-threshold="100" :refresher-triggered="is_refresh" class="full column" @scrolltolower="scrollSole" @refresherpulling="pullToRefresh">
maozai
- 发布：2020-10-30 11:06
- 更新：2022-02-16 16:08
- 阅读：2616
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 2.9.5
手机系统： Android
手机系统版本号： Android 10
手机厂商： 小米
手机机型： 所有手机
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
随便碰一下顶部就触发下拉刷新方法
随便碰一下顶部就触发下拉刷新方法
预期结果：
下拉达到一定的高度才触发下拉刷新
下拉达到一定的高度才触发下拉刷新
实际结果：
随便碰一下顶部就触发下拉刷新方法
随便碰一下顶部就触发下拉刷新方法
bug描述：
scroll-view在app中refresher-threshold设置的值无效啊下拉1像素就触发下拉刷新的方法的
7 个回复
maozai (作者) - 小程序开发者
swiper里套scroll-view
maozai (作者) - 小程序开发者
有官方技术帮排查一下嘛，微信benxiaozhuang
maozai (作者) - 小程序开发者
不是bug，我在找找，refresher-threshold值设置无效，随便下拉有点就触发下拉加载的方法
maozai (作者) - 小程序开发者
没有bug，我的问题
5***@qq.com
怎么解决的，求教一下
2021-11-16 22:39
f***@foxmail.com
你怎么解决的？我这边也是一样的问题
5***@qq.com
解决没呀
2021-11-16 22:40
iNiL0119
我用的是taro组件ScrollView，和小程序默认组件scorll-view是一样的。只是属性值写法不同而已。一开始我一直尝试设置refresherThreshold值，本能以为只要设置不同的值就能让组件自己去触发不同的下拉刷新的距离，结果不行。最后通过onRefresherRefresh（原生为bindrefresherrefresh）与refresherTriggered（原生为refresher-triggered）组合解决了这个问题。
具体思路如下：
onRefresh = (e) => {
const distantY = e.detail.dy // 松手后与顶部距离
this.setState({
refreshing: true
})
if (distantY >= 200) {
setTimeout(() => {
this.setState({
refreshing: false
})
}, 3000)
} else {
this.setState({
refreshing: false
})
}
}
组件如下：
<ScrollView
className='scroll-view'
// scrollY
// scrollWithAnimation
// enhanced={true}
refresherEnabled={true}
// refresherThreshold={500}
refresherTriggered={this.state.refreshing}
onRefresherPulling={this.onRefreshPulling}
onRefresherRefresh={this.onRefresh}
onRefresherRestore={this.onRefresherRestore}
// onScroll={this.onScorll}
// onScrollToUpper={this.onScrollToUpper} // 到顶部
// onScrollToLower={this.onScrollToLower} // 到底部
最后反过来看这个问题，感觉scroll-view还是比较坑，问题如下：
谭小谭 - 90后前端
:refresher-triggered="trigger"
@refresherpulling="onPulling"用这个事件
onPulling(e) {
console.log("刷新控件被下拉", e.detail.deltaY);
if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
if(e.detail.deltaY> 80) {
// 当下拉到一定程度，再促发刷新
this.trigger = true;
}
}