微信小程序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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
vue之nextTick全面解析
May 17 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
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根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
PHP count()函数讲解
2019/02/03 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
javascript call方法使用说明
2010/01/11 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
使用python实现rsa算法代码
2016/02/17 Python
浅谈Python的文件类型
2016/05/30 Python
Django如何配置mysql数据库
2018/05/04 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
PHP中如何创建和修改数组
2012/05/02 面试题
农救科工作职责
2013/11/27 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
2014年项目工作总结
2014/11/24 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
基层党建工作简报
2015/07/21 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
nginx七层负载均衡配置详解
2022/07/15 Servers