【uniapp】设置swiper组件禁止手动滑动失效的问题
1. 先看文档
uniapp官方文档介绍的 是这样写得属性说明,但有时会失效,看到这里挖个坑,来填了
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>
上一篇:
uniapp开发微信小程序-2.页面制作