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

微信小程序swiper禁止用户手动滑动的更多相关文章

  1. 微信小程序swiper实现 句子控app首页滑动卡片

    微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...

  2. 【微信小程序】获取用户地理位置权限,二次请求授权,逆解析获取地址

    摘要:微信小程序内获取用户地理位置信息授权,被拒绝后二次获取,获取权限后逆解析得到用户所在省市区等.. 场景:商城类小程序,在首页时需展示附近门店,即用户刚进入小程序时就需要获取到用户位置信息 ste ...

  3. nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId

    nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId 前言: 我准备用nodejs+koa+uniapp实现一款餐饮点单小程序,以及nodejs+koa+vue实现后端管理 ...

  4. 微信小程序-swiper(轮播图)抖动问题

    ps:问题 组件swiper(轮播图)真机上不自动滚动 一直卡在那里抖动 以前遇到这个问题,官方一直没有正面回复.就搁置了,不过有大半年没写小程序了也没去关注,今天就去看了下官方文档,发觉更新了点好东 ...

  5. 微信小程序swiper bindChange重复执行

    swiper是微信小程序的一个滑动组件,非常重要.如果只是做简单的轮播图而不进行复杂的逻辑,直接可以使用,甚至不需要知道组件的方法.今天在做一个如下的页面时,快速滑动swiper出现了问题: 控制台打 ...

  6. [重要更新]微信小程序登录、用户信息相关接口调整:使用 wx.getUserProfile 取代 wx.getUserInfo

    2021年2月24日,微信官方团队发布了一个调整通知:<小程序登录.用户信息相关接口调整说明>,公告明确从4月13日起,所有发布的小程序将无法使用 wx.getUserInfo 接口(JS ...

  7. 微信小程序 服务器端生成用户登陆环节的 3rd_session

    一.环境: CentOS 6.8 nginx 1.8.0 php 7.0.10 二.背景 最近在开发一个微信小程序,不可避免的涉及到登陆的环节,登录时序图如下: 通过 wx.login() 获取到用户 ...

  8. 微信小程序授权获取用户详细信息openid

    小程序获取用户的头像昵称openid之类 第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that. ...

  9. 微信小程序之获取用户位置权限(拒绝后提醒)

    微信小程序获取用户当前位置有三个方式: 1. wx.getLocation(多与wx.openLocation一起用) 获取当前的精度.纬度.速度.不需要授权.当type设置为gcj02 返回可用于w ...

随机推荐

  1. IE各版本处理XML的方式

    一.支持DOM2级的方式我们知道,现阶段支持DOM2的主流浏览器有IE9+.Firefox.Opera.Chrome和Safari.1.1.创建XML//实际上,DOM2级在document.impl ...

  2. 9.动态SQL

    动态 SQL,主要用于解决查询条件不确定的情况:在程序运行期间,根据用户提交的查 询条件进行查询. 提交的查询条件不同,执行的 SQL 语句不同.若将每种可能的情况均逐一 列出,对所有条件进行排列组合 ...

  3. 如何处理不能新建word、excel、PPT的情况?

    Office系列办公软件是大家都非常喜欢使用的软件,但是有些朋友反映在使用电脑时,在桌面右键菜单新建选项里没有Word.Excel或PPT,非常的耽误工作. 下面就为大家介绍一下桌面右键菜单新建选项里 ...

  4. zabbix上添加交换机监控记事

    ​ zabbix上添加交换机监控记事 ​ 第一次使用zabbix来添加监控华为s5720交换机,根本找不到头绪,像个无头的苍蝇一样的百度来处理,结果都没有任何效果,给自己增加了很多痛苦和心烦,增加不少 ...

  5. Matlab---读取 .txt文件

    Matlab读取 .txt文件 这里提供两种方法:1,load()函数.2,importdata()函数. ---------------------------------------------- ...

  6. 【Java基础 项目实例 -- Bank项目2】Account 和 customer 对象

    总结: customer.setAccount(account); //引用,日后的account 和 customer.getAccount()的结果始终一致 实验目的 扩展银行项目,添加一个 Cu ...

  7. [转]makefile学习

    原文: http://blog.fatedier.com/2014/09/08/learn-to-write-makefile-01/ -------------------------------- ...

  8. hbase实践之rowkey设计

    rowkey设计的重要性 rowkeys是HBase表设计中唯一重要的一点. rowkey设计要求 唯一性 存储特性 按照字典顺序排序存储 查询特性 由于其存储特性导致查询特性: 查询单个记录: 查定 ...

  9. Eclipse中给jar包导入JavaDoc注释文档的方法

    原文链接:http://www.apkbus.com/android-124056-1-1.html 第一步:将jar加入到Referenced Libraries 右键点击jar --> 选择 ...

  10. bcp导入导出sybase、sqlserver数据库数据

    常用数据备份格式为: bcp dbname..tablename out c:\temp\filename -Usa -Ppassword -Sservername -c 其中 dbname为数据库名 ...