uniapp开发小程序scrollView下拉刷新的状态如何关闭

最新推荐文章于 2024-05-10 16:03:55 发布
最新推荐文章于 2024-05-10 16:03:55 发布
阅读量3.9k 收藏 2
点赞数 2
分类专栏： uniapp 微信小程序 文章标签： 小程序 微信小程序 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jornze/article/details/125528057
版权

scrollView官网文档
在这里插入图片描述
官网中并未详细说明如何关闭下拉刷新的状态栏 只是给出了设置设置当前下拉刷新状态的配置：refresher-triggered。
我的理解是这样使用的：默认下拉刷新状态是开启的，即默认值是true,在刷新操作完成后将其设置为false以关闭下拉刷新状态，然并卵…

后来经过研究这个配置的正确使用方式是这样的：1、默认值是false，在scrollview触发下拉事件refresherpulling后 2、将其设置位true 3、在刷新操作完成后 再将其设置为false 。

至此，scrollView的下拉刷新的状态控制就已经完成了。
在这里插入图片描述

但使用时还是要注意：
在这里插入图片描述
在这里插入图片描述

官方明确说明，scrollView的下拉刷新性能不佳，如果有下拉刷新的需求还是建议使用页面级别的下拉刷新"enablePullDownRefresh": true

jornze
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序scroll-view下拉刷新(附带下拉刷新效果)
11-19
微信小程序scroll-view下拉刷新(附带下拉刷新效果) 使用说明 https://blog.csdn.net/u012308481/article/details/102619511
uni-app（9）— 下拉刷新以及关闭下拉刷新，上拉加载（页面触底）
热门推荐
tiffany_kim的博客
04-27 1万+
此文为uni-app总结笔记（9）— 下拉刷新以及关闭下拉刷新 下拉刷新 开启下拉刷新 在uni-app中有两种方式开启下拉刷新 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh 通过调用uni.startPullDownRefresh方法来开启下拉刷新 通过配置文件开启 创建list页面进行演示 <template> <view> 杭州学科 <view v-for="(it
uniapp禁止页面下拉刷新(Android、IOS)
皮皮的博客
11-22 3751
uniapp禁止页面下拉刷新(Android、IOS)
微信小程序-禁止页面下拉回弹
最新发布
1234Wu--Blog
05-10 599
微信小程序-禁止页面下拉回弹,主要是。
[微信小程序] scroll-view组件下拉刷新，怎样结束刷新(已解决)
k17775711225的博客
07-11 1592
定时器setTimeout为模拟异步函数，在回调函数中的逻辑代码执行完毕之后，手动让组件结束刷新即可。
【uniapp学习之】下拉刷新
weixin_38673922的博客
02-23 765
下拉刷新。
uniapp的下拉刷新 事件和关闭下拉刷新
weixin_67091603的博客
05-18 1642
/ 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感。setTimeout(() => { //800毫秒后关闭刷新。} //记得在page。json开启下拉刷新事件哦。this.getList() //请求数据。
【问题】uni-app的scroll-view下拉加载状态无法关闭，一直转圈圈
Yamy的博客
09-03 2389
解决uni-app的scroll- view无法关闭下拉刷新状态的问题
ScrollView实现下拉刷新
11-30
将开源项目PullToRefresh中的ScrollView下拉刷新提取出来了，可直接集成到项目中。
uniapp-scrollview实现双联动.zip
07-27
uniapp-scrollview实现双联动。点击标题，scrollview部分对应滑动。scrollview部分滑动，标题部分对应高亮
scrollview 下拉刷新
04-24
android scrollview 下拉 刷新 refresh
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
03-29
本文将为关注易用通小程序的朋友提供的是的微信小程序 scroll-view实现上拉加载与下拉刷新的实例相关教程，具体实例代码请看下文: 微信小程序 scroll-view实现上拉加载与下拉刷新的实例 实现效果图： (此图片来源于...
uniapp scroll-view 下拉刷新动画无法关闭问题
anjignren的博客
08-24 3105
uniapp scroll-view做的下拉刷新动画无法关闭问题
#Uniapp：onPullDownRefresh下拉刷新 和阻止stopPullDownRefresh
...
01-22 1166
页面下拉刷新周期。
uni-app 在遮罩层禁止下层的滚动和下拉刷新功能（动态设置下拉刷新）
liuye066的专栏
11-30 7332
最近在做一个uni-app的项目，其中有列表页中弹出查询弹窗的功能。列表中有下拉刷新和上拉加载的功能。 遇到的问题有： 1。在弹窗中上下滑动，底层页面也随着滑动 2。在弹窗中下拉时，也会触发下拉刷新功能，上划时，也可能会触发上拉加载功能； 3。在弹窗中的树形列表框加了滚动后，会报错：Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progres
taro开发微信小程序禁止下拉刷新(ios下拉出现空白问题)
weixin_50248346的博客
11-17 3667
一、问题描述 最近用tarojs在做一个小程序项目时，首页需要禁止下拉刷新，于是在page.json里面添加了这段话 "enablePullDownRefresh":false 全局关闭下拉刷新，这段话确实禁止了下拉刷新，无论是安卓手机端还是苹果端，但是在苹果端却出现了一个问题，整个页面虽然不能下拉刷新了，但是依然还可以下拉。视觉交互不允许我这么做， 二、解决方法 1、简单粗暴直接禁止页面的滚动，只需要在page.json里加上 disableScroll:true 注意这个属性只能单独加在需
uniapp的下拉刷新
m0_63250938的博客
10-31 443
在页面文件中，通过onPullDownRefresh()监听下拉刷新的动作。
uniapp启用弹框时候：禁止页面下拉刷新
HQ584256的博客
01-25 785
show()是开启弹框，isPull 为 false，则调用 setStyle() 方法禁用当前 Webview 实例的下拉刷新功能。close(）是关闭弹窗，isPull 为 true，则调用 setStyle() 方法设置当前 Webview 实例支持下拉刷新。如果在H5上使用，则会导致报错，并且在取消弹框时候，也会取消不了则需要添加仅APP可使用。（// #ifdef APP-PLUS和// #endif）则是仅APP可使用。使用的是动态设置下拉刷新的功能解决的，在app上亲测可用，在H5上会报错。
uniapp下拉刷新 scrollview
09-09
在 UniApp 中，可以使用 `scroll-view` 组件实现下拉刷新的功能。下面是一个简单的示例代码： ```vue <template> <view> <!-- 下拉刷新头部 --> <view class="refresh-header" :style="{ marginTop: `${refreshTop}px` }"> <text v-if="refreshStatus === 'normal'">下拉刷新</text> <text v-else-if="refreshStatus === 'pulling'">释放刷新</text> <text v-else-if="refreshStatus === 'refreshing'">正在刷新...</text> </view> <!-- scroll-view 包裹的内容 --> <scroll-view class="scroll-view" scroll-y @scrolltolower="loadMore" @scroll="scroll" @touchstart="touchStart" @touchend="touchEnd"> <!-- 内容列表 --> <view class="content-list"> <!-- 列表项 --> <view v-for="(item, index) in list" :key="index">{{ item }}</view> </view> <!-- 加载更多 --> <view v-if="showLoadMore" class="load-more"> <text>加载中...</text> </view> </scroll-view> </view> </template> <script> export default { data() { return { refreshTop: -60, // 下拉刷新头部的高度 refreshStatus: 'normal', // 下拉刷新状态 list: [], // 列表数据 showLoadMore: false, // 是否显示加载更多 }; }, methods: { scroll(e) { // 获取 scroll-view 的滚动位置 const scrollTop = e.detail.scrollTop; // 根据滚动位置判断是否触发下拉刷新 if (scrollTop < this.refreshTop && this.refreshStatus !== 'refreshing') { this.refreshStatus = 'pulling'; } else if (scrollTop >= this.refreshTop && this.refreshStatus !== 'refreshing') { this.refreshStatus = 'normal'; } }, touchStart() { // 记录 touchstart 时的滚动位置 this.startScrollTop = this.scrollTop; }, touchEnd() { // 判断是否触发下拉刷新 if (this.startScrollTop < this.refreshTop && this.refreshStatus === 'pulling') { this.refreshStatus = 'refreshing'; // 执行刷新操作，例如请求数据 this.refresh(); } }, refresh() { // 模拟异步请求数据 setTimeout(() => { this.list = [1, 2, 3, 4, 5]; this.refreshStatus = 'normal'; }, 2000); }, loadMore() { // 模拟异步加载更多数据 setTimeout(() => { const start = this.list.length + 1; const end = start + 5; for (let i = start; i <= end; i++) { this.list.push(i); } // 隐藏加载更多的提示 this.showLoadMore = false; }, 2000); }, }, }; </script> <style> .refresh-header { display: flex; justify-content: center; align-items: center; height: 60px; } .scroll-view { flex: 1; } .content-list { padding: 20px; } .load-more { display: flex; justify-content: center; align-items: center; height: 40px; background-color: #f4f4f4; } </style> ``` 以上代码实现了一个简单的下拉刷新和加载更多的功能，当用户下拉超过下拉刷新头部指定的高度时，释放后会触发刷新操作。加载更多则是在滚动到底部时触发并加载更多数据。你可以根据实际需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值