uniapp原生下拉刷新在手机上不起作用

开启原生下拉刷新时,页面里使用了全屏高的scroll-view,向下拖动内容时,会优先触发scroll-view滚动而不是下拉刷新。

bash 复制代码
"enablePullDownRefresh": true,

这就可能会导致下拉刷新不起作用,这时候就需要做到取舍,看看是保留scroll-view,使用自带的下拉刷新,还是保留原生的下拉刷新。

scroll-view下拉刷新

html 复制代码
	<scroll-view :refresher-triggered="refresh" @refresherrefresh="onRefresh"
                 scroll-y="true" refresher-enabled="true" :refresher-threshold="100">
				<view class="friendlist">
					<view v-for="(item, index) in presentData" :key="index">
						<view class="card" @click="Chatpage(item)">
						</view>
					</view>
				</view>
	</scroll-view>
javascript 复制代码
	// 控制下拉刷新
	const refresh = ref(false)
    // 下拉刷新触发方法
	const onRefresh = async () => {
        //打开下拉刷新
        refresh.value = true;
        
        /**
          * 写下拉刷新需要的操作
          */		

        // 这里不能直接让refresh直接为false,否则可能会发生下拉加载无法复位的情况
		setTimeout(() => {
			refresh.value = false;
		}, 500)
	}
相关推荐
三脚猫的喵1 分钟前
微信小程序中实现AI对话、生成3D图像并使用xr-frame演示
前端·javascript·ai作画·微信小程序
文心快码BaiduComate6 分钟前
文心快码3.5S全新升级,体验多智能体协同开发,最高赢无人机!
前端·后端·程序员
安卓开发者11 分钟前
鸿蒙Next ArkWeb进程解析:多进程架构如何提升Web体验
前端·架构·harmonyos
炒毛豆13 分钟前
移动端响应式px转换插件PostCSS的使用~
前端·javascript·postcss
恋猫de小郭33 分钟前
Flutter Riverpod 3.0 发布,大规模重构下的全新状态管理框架
android·前端·flutter
wordbaby34 分钟前
用 window.matchMedia 实现高级响应式开发:API 全面解析与实战技巧
前端·javascript
薄雾晚晴39 分钟前
Rspack 实战,构建流程升级:自动版本管理 + 命令行美化 + dist 压缩,一键输出生产包
前端·javascript
huabuyu43 分钟前
在 Taro 小程序中实现完整 Markdown 渲染器的实践
前端
Running_slave1 小时前
位运算左移右移应该怎么玩?
前端·javascript·算法
晚星star1 小时前
在 Web 前端实现流式 TTS 播放
前端·vue.js