微信小程序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 相关文章推荐
用函数式编程技术编写优美的 JavaScript
Nov 25 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
Vue2 模板template的四种写法总结
Feb 23 Javascript
javascript的delete运算符知识点总结
Nov 19 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调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
多广告投放代码 推荐
2006/11/13 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
python+opencv实现阈值分割
2018/12/26 Python
python异步存储数据详解
2019/03/19 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Python3如何判断三角形的类型
2020/04/12 Python
python实现飞船大战
2020/04/24 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
python 图像增强算法实现详解
2021/01/24 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
函授大专自我鉴定
2013/11/01 职场文书
护理实习自我鉴定
2013/12/14 职场文书
班级团队活动方案
2014/08/14 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL
DQL数据查询语句使用示例
2022/12/24 MySQL