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

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

1. 先看文档

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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

2. 解决方法

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

<swiper-item class="box-item"
	
>
	<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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20