【uniapp】设置swiper组件禁止手动滑动失效的问题

写uniapp项目有个跨多端平台的有点,但是要埋的坑比较多,这不有一个平台跨出现问题了,编译运行在微信小程序开发工具上会出现了,swiper组件设置禁止手动滑动失效的问题,接下来讲讲怎么解决

1. 先看文档

uniapp官方文档介绍的 swiper 是这样写得属性说明,但有时会失效,看到这里挖个坑,来填了

属性名类型默认值说明
disable-touchBooleanfalse是否禁止用户 touch 操作
touchableBooleantrue是否监听用户的触摸事件,只在初始化时有效,不能动态变更

2. 尝试修改

在某自定义组件内有加了swiper,又想要停止用户触摸滑动操作,加上catchtouchmove属性后,代码如下

<template>
	<!-- ... -->
	<swiper class="zs-tablet-box" active-class="swipter-active" :current="activeIndex" disable-touch="true" touchable="false" >
	<swiper-item class="box-item" catchtouchmove="onstoptouchmove">
		<view class="form">
			<view class="form-header">
				<text>设置</text>
			</view>
			<view class="form-content">
				<scroll-view :scroll-y="true" :style="{height:(size-60)+'px'}">
					<view>
						<slot></slot>
					</view>
				</scroll-view>
			</view>
		</view>
	</swiper-item>
	</swiper>
	<!-- ... -->
</template>
<script>
	export default {
		data(){
			return {
				size:300,
				activeIndex:0,
			}
		},
		//...
		methods:{
			onstoptouchmove(){
				return false;
			},
		}
		//...
	}
</script>

但是,这放在微信小程序上编译后会报出上面提到的错误,...does not have a method "onstoptouchmove" to handle event "touchmove",究竟是什么意思呢,翻译过来是说触摸移动方法有问题

2. 解决方法

解决方法是这样的,在uniapp项目上只要在前面加上@,还有,要符合Vue规范写法,应该替换成touchmove.stop这样,在微信小程序上就不会报错了,果然有效,代码如下

<swiper-item class="box-item"
	<!-- #ifdef MP-WEIXIN -->
		@touchmove.stop
	<!-- #endif -->
>
	<view class="form">
		<view class="form-header">
			<text>设置</text>
		</view>
		<view class="form-content">
			<scroll-view :scroll-y="true" :style="{height:(size-60)+'px'}">
				<view>
					<slot></slot>
				</view>
			</scroll-view>
		</view>
	</view>
</swiper-item>


  • 8
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

TA远方

谢谢!收到你的爱╮(╯▽╰)╭

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

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

打赏作者

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

抵扣说明:

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

余额充值