小程序禁止页面左右滑动

最新推荐文章于 2024-08-12 10:10:13 发布
最新推荐文章于 2024-08-12 10:10:13 发布
阅读量1.2w 收藏 4
点赞数 4
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34227291/article/details/95044596
版权

小程序禁止页面左右滑动

PS：在开发过程中可能会遇到某一个页面可以左右滑动，在开发者工具是查看不出来，只有在手机预览才可以看的出来（尝试左或者右滑动）。

我的解决方法是在根DOM添加了以下的CSS样式：

overflow-x:hidden;	//裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话进行隐藏
菊花枸杞茶
关注
专栏目录
每日一记：支付宝小程序通过左右滑动屏幕进行切换页面
点滴的幸福
10-08 1951
目前很多手机app都支持左右滑动屏幕进行切换页面，提升了用户体验，有其是大屏手机，要点击左上角的返回按键确实有点辛苦！ 这里以支付宝小程序为例，演示如何在小程序中实现上述效果。 废话不多说，直接上干货： 1、在.axml文件的最外层视图容器view（你也可以选择自己合适的部位）中添加开始和结束事件 <view class="page-todos" onTouchStart="Tou...
小程序页面禁止滑动
weixin_33774308的博客
04-08 2992
要做一个弹窗功能，弹窗是可以拖拽的，而且弹窗里的元素是有bindtap事件的，在弹窗使用了bindtouchstart之后发现弹窗拖拽的同时背景也在滑动，改为使用了catchtouchstart之后背景不滑动了，但是发现子元素的bindtap事件无法执行，于是又改为了bindtouchstart，换一种思路，选择另一种方法就是如何让页面禁止滑动，只需要加上下边的代码到本页json文件就可以了 ，...
微信小程序写一个可以左右拖拽滑动选择范围的组件
最新发布
w807139809的博客
08-12 286
微信小程序写一个可以左右拖拽滑动选择范围的组件
小程序禁止页面上下滑动
Iphone886的博客
02-10 532
单页面禁止上线下滑动，页面弹窗后，页面禁止上下滑动
小程序如何解决屏幕禁止滑动
weixin_34284188的博客
03-01 4878
小程序如何解决屏幕禁止滑动，并且不影响滑动事件 https://www.jianshu.com/p/602... 1.整个布局用<scroll-view>作为根节点包裹所有view，并动态绑定scroll-view的scroll-y属性<scroll-view scroll-y="{{isScroll}}">2.样...
换思路解决小程序page设定背景图片fixed导致页面不能滑动（小程序设置背景图片）
weixin_45741552的博客
10-06 577
暂时没有什么办法，记录着先。 参考了这篇博文的办法。https://blog.csdn.net/qq_44532195/article/details/105933485 按照这篇文章，在每一个页面开头加上这段代码： <view> <image mode="scaleToFill" src="/imgs/bg-1.png"style="width:100%;height:100%;position:fixed;z-index:-1;"></image> </vi
微信小程序 界面禁止下拉 左右滑动_微信小程序实现卡片左右滑动效果
weixin_39542608的博客
11-20 727
前言 快放假了，人狠话不多，啥也不说了。先看效果图。 思路 从上面的效果图来看，基本的需求包括：左右滑动到一定的距离，就向相应的方向移动一个卡片的位置。卡片滑动的时候有一定的加速度。如果滑动距离太小，则依旧停留在当前卡片，而且有一个回弹的效果。 看到这样的需求，不熟悉小程序的同学，可能感觉有点麻烦。首先需要计算卡片的位置，然后再设置滚动条的位置，使其滚动到指定的位置，而且在滚动的过程中，加上一点加...
微信小程序swiper禁止用户手动滑动代码实例
01-03
最近做一个项目，由于用到了竖向swiper，导致占用屏幕过大，用户滑动总是滑动到swiper组件，页面无法向下拉动，于是找各种办法禁止用户手动滑动swiper组件。 经过网上一番查找，网友们也是闹洞大开，各种方法都想...
小程序 页面禁止左右滑动
06-07
在小程序页面的 `wxml` 文件中，可以添加 `scroll-x` 属性来禁止页面左右滑动。例如： ``` 这里是页面内容 ``` 设置 `scroll-x` 属性为 `false` 即可禁止页面左右滑动。 2. 使用 `catchtouchmove` 事件 在小程序...
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
01-21
利用小程序事件处理的api，分别读取触摸开始，触摸移动时，触摸结束的X/Y坐标，根据差值来改变整个卡片的位置。 这里有一个细节，为了防止按钮的点击干扰到卡片主部分的滑动，需要将整个卡片分为两部分。 <...
小程序禁止弹框下面的内容滑动
qq_40039641的博客
07-03 3945
加上catchtouchmove='true' 这个属性就可以&lt;view class="complaints-bounced" hidden="{{bounced}}" catchtouchmove='true'&gt; &lt;view class="mask"&gt;&lt;/view&gt; &lt;view class="complaints-content&a
小程序阻止手机自带的滑动返回退出事件（uni-app，微信小程序，page-container）
weixin_47211345的博客
03-11 6183
阻止手机自带滑动返回事件的需求实现 和 page-container的使用
微信小程序长图超过屏幕页面不能下拉_微信小程序的页面弹窗过长滚动导致的底层滚动（滚动穿透问题）解决办法...
weixin_39576127的博客
02-05 2767
对于微信小程序，弹窗时，如果弹窗内容过长，需要滚动，滚动同时，底部页面跟着滚动，这如何优雅的处理这个问题？处理1(不推荐)： --添加position:fixed弹窗时通过给底部最大的view标签添加position:fixed;，从而达到页面不会跟着弹窗滚动超长底部内容弹窗超长内容缺点：在取消了该属性后，页面自动滚动回页面顶部，失败。处理2(不推荐)：--添加catchtouchmove 事...
小程序页面左右滑动如何解决
程邓楠的博客
07-24 2722
1、css解决 //最外层父元素 width:100%; overflow-x:hidden; 2、pages.json中配置 { "path": "platforms/mp-weixin/mine/mine", "style": { //disableScroll:控制当前页面不可滑动 "disableScroll": true } }, disableScroll Bool
【uniApp】解决支付宝小程序平台上的页面禁止拖动
独树一枝
04-14 2496
在pages.json文件中，找到需要禁止拖动的页面path，在style添加mp-alipay属性，设置编译到 mp-alipay 平台的特定样式。 其中有allowsBounceVertical属性 ：是否允许向下拉拽。支持 YES / NO "mp-alipay":{ "allowsBounceVertical":"NO" } 代码例子： ...
微信小程序禁止页面左右滑动
weixin_53760974的博客
01-06 7357
小程序禁止页面左右滑动 1、页面中view设置width:100%之后，页面右边会多出一块白区域，并且可以左右滑动，解决方法是给这个view加一个box-sizing：border-box; 2、直接给最外层的view设置一个overflow-x:hidden; //裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话进行隐藏 3、在json文件里面加 "disableScroll": true 4、给page一个弹性盒子 page { width: 100%; dis...
微信小程序页面禁止滑动
辽辽无期的博客
06-01 2125
【代码】微信小程序页面禁止滑动。
小程序 自定义弹窗后禁止屏幕滚动（滚动穿透）
热门推荐
lomenw的博客
06-08 3万+
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。解决方法：在弹出层加上 catchtouchmove 事件 示例代码：&lt;view class="modal-view" hidden="{{!showModal}}" bindtap="toggleModal" catchtouchmove="preventTouchMove"&gt;  &lt;view class="m
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值