微信小程序swiper禁止用户手动滑动
最近做一个项目,由于用到了竖向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禁止用户手动滑动的更多相关文章
- 微信小程序swiper实现 句子控app首页滑动卡片
微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...
- 【微信小程序】获取用户地理位置权限,二次请求授权,逆解析获取地址
摘要:微信小程序内获取用户地理位置信息授权,被拒绝后二次获取,获取权限后逆解析得到用户所在省市区等.. 场景:商城类小程序,在首页时需展示附近门店,即用户刚进入小程序时就需要获取到用户位置信息 ste ...
- nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId
nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId 前言: 我准备用nodejs+koa+uniapp实现一款餐饮点单小程序,以及nodejs+koa+vue实现后端管理 ...
- 微信小程序-swiper(轮播图)抖动问题
ps:问题 组件swiper(轮播图)真机上不自动滚动 一直卡在那里抖动 以前遇到这个问题,官方一直没有正面回复.就搁置了,不过有大半年没写小程序了也没去关注,今天就去看了下官方文档,发觉更新了点好东 ...
- 微信小程序swiper bindChange重复执行
swiper是微信小程序的一个滑动组件,非常重要.如果只是做简单的轮播图而不进行复杂的逻辑,直接可以使用,甚至不需要知道组件的方法.今天在做一个如下的页面时,快速滑动swiper出现了问题: 控制台打 ...
- [重要更新]微信小程序登录、用户信息相关接口调整:使用 wx.getUserProfile 取代 wx.getUserInfo
2021年2月24日,微信官方团队发布了一个调整通知:<小程序登录.用户信息相关接口调整说明>,公告明确从4月13日起,所有发布的小程序将无法使用 wx.getUserInfo 接口(JS ...
- 微信小程序 服务器端生成用户登陆环节的 3rd_session
一.环境: CentOS 6.8 nginx 1.8.0 php 7.0.10 二.背景 最近在开发一个微信小程序,不可避免的涉及到登陆的环节,登录时序图如下: 通过 wx.login() 获取到用户 ...
- 微信小程序授权获取用户详细信息openid
小程序获取用户的头像昵称openid之类 第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that. ...
- 微信小程序之获取用户位置权限(拒绝后提醒)
微信小程序获取用户当前位置有三个方式: 1. wx.getLocation(多与wx.openLocation一起用) 获取当前的精度.纬度.速度.不需要授权.当type设置为gcj02 返回可用于w ...
随机推荐
- SpringCloud 随笔
目录 服务间通讯 统一配置中心 RabbitMQ Spring Cloud Stream 服务网关 Spring Cloud Zuul ++==(纯手打,代码可能有错!)==++ 服务间通讯 Rest ...
- idea代码爆红,clean,或者maven reimport都不起作用
1 突然自己的idea的Maven项目代码都是爆红,但是可以运行,添加新的代码确无法运行 尝试了clean,或者reimport,甚至是大家推荐的,刷新缓存重启也没有作用 2 检查项目的jdk配置,也 ...
- MySQL安装步骤及环境变量配置
MySQL安装 MySQL下载地址:http://dev.mysql.com/downloads/installer/1:首先进入的是安装引导界面2:然后进入的是类型选择界面,这里有3个类型:Typi ...
- Kubernetes的初始化容器initContainers
initContainers是一种专用的容器,在应用程序容器启动之前运行,可以包括一些应用程序镜像中不存在的实用工具和安装脚本,可以完成应用的必要数据初始化等工作.总的来说就是在正式的容器启动之前做一 ...
- Redis主从、哨兵、集群
主从 命名设置:>6380 slaveof 127.0.0.01 6379 slaveof on one----------配置:-- 注意一点: 一定开启rdb,不能使用aof从节点配置:主节 ...
- 【CQOI2017】老C的键盘
Description https://loj.ac/problem/3023 一句话题意:给你一棵完全二叉树,每条边有一个方向,求这棵树有多少种不同的拓扑序. Solution 简化题意后,其实就是 ...
- C#实现异步阻塞TCP(SocketAsyncEventArgs,SendAsync,ReceiveAsync,AcceptAsync,ConnectAsync)
1.类 (1)socket IO操作内存管理类 BufferManager // This class creates a single large buffer which can be divid ...
- jQuery基础 (一)—样式篇
jQuery的优势 jQuery有很多特性和工具方法
- linux 没有界面内容显示不全解决办法
1.管道 管道简单理解就是,使用管道意味着第一个命令的输出会作为第二个命令的输入,第二个命令的输出又会作为第三个命令的输入,依此类推.利用Linux所提供的管道符“|”将两个命令隔开,管道符左边命令的 ...
- BZOJ4383 [POI2015]Pustynia[线段树优化建边+拓扑排序+差分约束]
收获挺大的一道题. 这里的限制大小可以做差分约束,从$y\to x$连$1$,表示$y\le x-1$即$y<x$,然后跑最长路求解. 但是,如果这样每次$k+1$个小区间每个点都向$k$个断点 ...