微信小程序swiper禁止用户手动滑动
2024-10-17 06:25:15
最近做一个项目,由于用到了竖向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
}
最新文章
- css 拾遗
- 修改bootstrap modal模态框的宽度
- mysql长连接和短连接的问题 转
- Eclipse插件—Easy Explorer
- Android开发之动画(转)
- 使用Mono Cecil 动态获取运行时数据 (Atribute形式 进行注入 用于写Log) [此文报考 xxx is declared in another module and needs to be imported的解决方法]-摘自网络
- ZeroBrane Studio远程调试Lua程序(转)
- java 遍历树节点 同时保留所有的从根到叶节点的路径
- Windows kernel pool 初探(2014.12)
- 修改jsonb的属性
- 美团,点评,澎湃等APP的启示
- Spring + Mybatis 项目实现动态切换数据源
- iOS 环信集成单聊界面,出现消息重复问题
- 并发编程(十):AQS
- BootStrap分页教程
- Java_Number(装箱和拆箱)
- 编程菜鸟的日记-初学尝试编程-C++ Primer Plus 第5章编程练习6
- Java基础实训2
- Asp.net core Identity + identity server + angular 学习笔记 (第一篇)
- SVM算法简单应用
热门文章
- C调用C++(C++封装以及C对其调用)
- zepto学习(一)之click事件和tap事件比较
- 13 Msql之四种事务隔离界别
- HTML Ueditor加载空白问题
- excel中的更新链接
- 【Git】六、分支管理&;冲突解决
- 发送短信——java
- 翻译应用将在Win8.1系统中取消下载安装
- CAFFE(一):Ubuntu 下安装CUDA(安装:NVIDIA-384+CUDA9.0+cuDNN7.1)
- TensorFlow指定GPU/CPU进行训练和输出devices信息