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

1. 先看文档

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

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

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>

2. 解决方法

<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>
经验分享 程序员 微信小程序 职场和发展