微信小程序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_12_执行模型浅析
Oct 18 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 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编码规范的深入探讨
2013/06/06 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
javascript实现微信分享
2014/12/23 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python3基础之基本运算符概述
2014/08/13 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
用python实现名片管理系统
2020/06/18 Python
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
WiFi云数码相框:Nixplay
2018/07/05 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
心得体会怎么写
2013/12/30 职场文书
大学生入党思想汇报
2014/01/01 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
排球赛新闻稿
2015/07/17 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP