[uni-app] mescroll与 page 本身的滚动冲突处理, 动态禁用下拉刷新

参考贴:
uniapp动态禁用mescroll-body组件的下拉刷新,或者动态禁用mescroll-body组件的上拉加载

记录问题场景

在这里插入图片描述
如图:
搜索和 第二个标签栏, 都是随页面滚动的, 当页面滚动一定距离, 会触发标签栏的吸顶

在这里插入图片描述
即如上图,

问题描述

当列表页面数据部满屏时,
且页面已经由于滚动而吸顶

下拉的
正确的逻辑应该是, 先恢复上图1的状态, 再去进行下拉刷新,
但是由于 <mescroll的下拉刷新拦截了手势, 导致吸顶状态就执行了下拉刷新, 页面效果也是卡顿效果,

这里的解决办就是,在吸顶状态下, 动态禁用mescroll的下拉刷新,即可

在这里插入图片描述

当然这里是初始化, 必须是动态修改的话:

			viewonPageScroll(e) {
				let scrollTopRang = 70 + 0; // 140rpx 
				if (e.scrollTop > scrollTopRang) {
					this.isfixed = true
					this.mescroll.optDown.isLock = true

				} else {
					this.isfixed = false
					this.mescroll.optDown.isLock = false
				}
			},

这里的isfixed就是判断吸顶的表示,
可以通过 this.mescroll.optDown.isLock = true 来动态禁用和恢复mescroll的下拉刷新.

  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值