微信小程序swiper禁止用户手动滑动代码实例
更新时间：2019年08月23日 14:55:05 作者：kiimi
这篇文章主要介绍了微信小程序swiper禁止用户手动滑动代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
前言
最近做一个项目，由于用到了竖向swiper，导致占用屏幕过大，用户滑动总是滑动到swiper组件，页面无法向下拉动，于是找各种办法禁止用户手动滑动swiper组件。
经过网上一番查找，网友们也是闹洞大开，各种方法都想出来了，有用透明蒙层覆盖的，这不失为一种很好的解决办法，但是如果swiper上有元素需要点击就没有办法了。
继续查找，于是找到了用 catchtouchmove 事件来截获用户手动滑动事件，这样既解决了禁用用户手动滑动，有解决了有点击按钮不影响使用
代码：
WXML:
<swiper class='yaohe' vertical='true' circular='true' autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for='{{yaohe}}'>
<swiper-item catchtouchmove='catchTouchMove'> <!--重点这里-->
<block wx:for='{{item}}'>
<view class='yaohe_item'>
<view class='yaohe_img'>
<image src='{{item.goods_icon}}'></image>
</view>
<view class='yaohe_right'>
<view class='yaohe_text'>{{item.goods_feature}}</view>
<view class='boss_price'>
<view class='boss'>{{item.shop_name}}</view>
<view class='price' bindtap='goGoodsDetail' data-shop_goods_id='{{item.shop_goods_id}}'>￥{{item.goods_price}}</view>
</view>
</view>
</view>
</block>
</swiper-item>
</block>
</swiper>
JS:
// 截获竖向滑动
catchTouchMove:function(res){
return false
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要是对js判断页面中是否有指定控件的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）
这篇文章主要介绍了使用JavaScript实现网页秒表（含开始、暂停、继续、重置功能）,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
JavaScript markdown 编辑器实现双屏同步滚动
这篇文章主要介绍了JavaScript markdown 编辑器实现双屏同步滚动，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
一般情况下我们在FLASH幻灯片字符串中有连接符时点击链接就会不正常，造成链接中的参数丢失，那么就需要用encodeURIComponent来对链接地址进行编码2012-03-03
这篇文章主要介绍了Javascript动态创建div的方法,是javascript节点操作的典型应用,非常具有实用价值,需要的朋友可以参考下2015-02-02
用JS：history.go(-1)就可以回到A页面，如果使用Click,Change事件等激发了页面的回传，此时用history.go(-1)就回不到A页面了，遇到此问题的朋友们可以祥看本文2013-03-03
我想在页面里把想要的关键词加亮凸出(用颜色区分出来)显示,这样让客户一眼能看到重的东西,然后在加亮的关键词上可以加上超连接.请问高手们怎么实现宋的功能.就像搜索引擎的那种..搜索关键词的时候就显示红色的.2008-06-06
这篇文章主要介绍了JS使用正则表达式实现关键字替换加粗功能,涉及javascript基本正则匹配与替换操作相关技巧,需要的朋友可以参考下2016-08-08
微信小程序如何根据不同用户切换不同TabBar(简单易懂!)
小程序中我们可能需要根据不同的权限展示不同的tabbar,下面这篇文章主要给大家介绍了关于微信小程序如何根据不同用户切换不同TabBar的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要为大家详细介绍了Bootstrap树形控件使用方法，感兴趣的小伙伴们可以参考一下2016-01-01
最新评论