解决uniapp局部页面(scrollview)下拉刷新出现不能复位的问题

问题所在:(困扰了我一天)
局部页面自定义刷新出现下拉页面不能复位的问题

看下解决后的效果

废话不多说直接上代码


	<view class="content">
		<scroll-view class="section" :style="{'height':'300px'}" :refresher-enabled='freshing' :refresher-triggered='triggered' scroll-y="true" show-scrollbar="true"
			@refresherrefresh="onRefresh"  @refresherpulling="onPulling"   lower-threshold="60"
			refresher-background="#002C70">
			<view class="section-weather">
				<view class="section-weather-title"><text class="text-xs">测试测试测试测试测试测试测试测试测试测试</text>
				</view>
			</view>
			<view class="section-weather">
				<view class="section-weather-title"><text class="text-xs">测试测试测试测试测试测试测试测试测试测试</text>
				</view>
			</view>
			<view class="section-weather">
				<view class="section-weather-title"><text class="text-xs">测试测试测试测试测试测试测试测试测试测试</text>
				</view>
			</view>
			<view class="section-weather">
				<view class="section-weather-title"><text class="text-xs">测试测试测试测试测试测试测试测试测试测试</text>
				</view>
			</view>
		</scroll-view>
	</view>
                //初始化
				triggered: false, //设置当前下拉刷新的状态
				freshing: true
		        onLoad() {
		        	this._freshing = false;
		            },
            //方法
			//自定义下拉刷新被触发
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.$modal.msg('更新成功')
					this.triggered = false;
					this._freshing = false;
				},2000)
			}, 
			onPulling(e) {
				console.log(e,'11')
				if (e.detail.deltaY < 0) {
					return
				}
				this.triggered = true
			},

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
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
发出的红包

打赏作者

爱池鱼的酱酱仔

您的鼓励是我前进的动力哦~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值