微信小程序swiper禁止用户手动滑动代码实例


Posted in Javascript onAugust 23, 2019

前言

最近做一个项目,由于用到了竖向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
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
JS返回顶部实例代码
Aug 09 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 #Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 #Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 #Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 #Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 #Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 #Javascript
VUE实现移动端列表筛选功能
Aug 23 #Javascript
You might like
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
学习jQuery中的noConflict()用法
2018/09/28 jQuery
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
高二学生评语大全
2014/04/25 职场文书
大型营销活动计划书
2014/04/28 职场文书
教师节宣传方案
2014/05/23 职场文书
抵押贷款承诺书
2014/05/30 职场文书
争先创优心得体会
2014/09/12 职场文书
毕业证代领委托书
2014/09/26 职场文书
经费申请报告
2015/05/15 职场文书
高考1977观后感
2015/06/04 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
Python日志模块logging用法
2022/06/05 Python