【uniapp】禁止页面上下滚动

最新推荐文章于 2024-09-20 20:13:01 发布
最新推荐文章于 2024-09-20 20:13:01 发布
阅读量4.4k 收藏 3
点赞数 1
分类专栏： uni - app 文章标签： uni-app 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44632227/article/details/134121308
版权
本文讨论了如何在WeApp的pages/assess/signatureBoard页面中使用disableScroll:true属性来阻止页面上下滚动，包括其默认行为和适用范围，指出在globalStyle中设置此属性无效。
摘要由CSDN通过智能技术生成

是用"disableScroll": true属性控制，该属性默认为 false
设置为 true 则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在 globalStyle 中设置无效。

{
	"path": "pages/assess/signatureBoard",
	"style": {
		"navigationBarTitleText": "签字",
		"disableScroll": true
	}
},
Y_coder
关注
专栏目录
uni-app - APP平台禁止页面滑动（无法上下滚动屏幕页面）
王佳斌
12-23 1万+
前言 注意：仅 APP 平台，在 pages.json 中进行配置。 有些时候，我们需要将页面固定住，让用户无法下拉与滚动页面。 全局配置 在 globalStyle 中进行配置，便是所有页面均有效。 "globalStyle": { "app-plus": {//app平台 "bounce": "none"//禁止滚动 } }, 局部配置 在该页面 style 中进行配置，仅对该页有效。 "path": "pages/login/login", "style": { "app-plus":
禁止弹窗中蒙层底部页面跟随滚动的几种方法
01-19
场景概述 众所周知，弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。 那么，如何阻止呢？请看以下分析： 方案分析 方案一 打开蒙层时，给body添加样式： overflow: hidden; height: 100%; 在某些机型下，你可能还需要给根节点添加样式： overflow: hidden; 关闭蒙层时，移除以上样式。 优点： 简单方便，只需添加css样式，没有复杂的逻辑。 缺点： 兼容
uniapp中使用swiper组件实现禁止滑动功能
m0_60859997的博客
09-20 489
uniapp中使用swiper组件实现禁止滑动功能
uniapp——uniapp 禁止当前页面滚动
qq_43201350的博客
03-28 2061
uniapp——uniapp 禁止当前页面滚动
移动端禁止页面滑动
俊刚的博客
10-20 1万+
var mo=function(e){e.preventDefault();}; function stop(){         document.body.style.overflow='hidden';                 document.addEventListener("touchmove",mo,false);//禁止页面滑动 } /***取消滑动限制***/
uni-app实现禁止弹出框滚动穿透
qq_31647491的博客
10-14 3746
在uni-app开发中，经常会使用弹出框、遮罩层以及日期选择器等组件，但在这些组件中可能会出现滚动穿透的问题。滚动穿透是指当组件内的内容滚动到底部时，继续滑动会导致底层页面的滚动，这可能会影响用户体验。
uniapp禁止页面上下滚动
热门推荐
Dream_Fever的博客
06-21 2万+
uniapp禁止页面上下滚动的方法
【uniapp】禁止遮罩层下的页面滚动解决办法
Brod-Roy的博客
02-27 9489
不少朋友在日常工作中都会遇到需要自定义弹窗的时候，当开启弹窗后，却发现存在弹窗下的页面依旧可以被触发滚动的问题，以下是相关的解决方法。
uniapp禁止页面滑动的方法：
nelly521的博客
10-17 1706
{ "path": "pages/client/product/product_equity", "style": { "navigationBarTitleText": "产品介绍", "navigationStyle":"custom" , "transparentTitle": "always", "titlePenetrate": "YES", "enablePullDownRefresh": false,//禁止下滑刷屏 "navigationBa
uniapp 禁止滚动穿透(一般用于遮罩)-小程序/app/h5适用
weixin_44805839的博客
07-04 1万+
uniapp 禁止滚动穿透(一般用于遮罩)-小程序/app适用
uniapp-微信小程序关于禁止ios自带的下拉上拉（橡皮筋回弹）
m0_61702149的博客
08-26 1万+
微信小程序禁止 ios 自带的下拉上拉回弹
Uniapp 横向滚动抽奖页面 组件 引用即可 全端
09-26
引入组件即可 <TC-choujiang></TC-...里面的商品图片和被抽出商品跳转页面按照实际情况进行修改。 商品图片可以从数据库中获取进行赋值即可 位置：uni_modules/TC-choujiang/components/TC-choujiang/TC-choujiang
uniapp 仿抖音上下滑动视频.zip
03-12
3. 页面结构：uniapp中的页面由.vue文件组成，包含模板（template）、脚本（script）和样式（style）三个部分，分别负责视图层、逻辑层和样式定义。 二、仿抖音上下滑动视频实现 1. 滑动组件：这个项目的核心是...
Uniapp微信小程序滚动条跳转到元素高度
09-04
Uniapp框架的针对微信小程序的使滚动条跳转到指定元素位置。直接复制粘贴内容，然后配置好page.json。就可以直接查看效果。
uniapp实现横向滚动选择日期
01-18
本文实例为大家分享了uniapp实现横向滚动选择日期的具体代码，供大家参考，具体内容如下 1.方法封装 common.js //获取当前时间，格式YYYY-MM-DD HH:MM:SS const GetNowTime = time => { var date = time, year = ...
Uniapp swiper 滚动图组件
09-10
【标题】"Uniapp swiper 滚动图组件"是一个基于Vue.js开发的全端兼容的前端组件，专为在不同平台（如iOS、Android、H5等）上实现滑动轮播效果而设计。它提供了丰富的功能和高度的自定义性，使得开发者能够轻松地在...
uniapp禁止上下滑动
qq_48881427的博客
12-22 789
uniapp
uniapp在app端页面上下左右滑动问题，禁止上下左右滑动影响canvas和触摸事件
qq_42682622的博客
03-24 3793
当在app端运行uniapp项目时会有页面回弹效果，即页面拉到最上面或最下面时有一定的拉伸效果让页面更加柔和，但有些场景我们不希望有这种效果，比如页面中有触摸事件产生图形化效果时，比如有个能画画的canvas画布时此时如果存在回弹效果或滑动效果就会影响画图，通过上图中搜索框和canvas画布的拉伸可以看出影响。
uni-app 禁止页面上下滚动的方法
qq_37746495的博客
03-21 6202
uni-app 禁止页面上下滚动的方法
uniapp禁止页面上下滑动
最新发布
09-21
在UniApp中，如果你想禁止页面的上下滑动（通常是为了阻止默认的滚动行为或者实现某种交互效果），你可以通过以下几种方法来实现： 1. **阻止默认行为**：在页面滚动事件的处理函数中添加 `event.preventDefault()` 来阻止浏览器的默认滚动行为。例如，在Vue组件的模板中： ```html <template> <div @touchmove.prevent="handleTouchMove"> <!-- 其他内容 --> </div> </template> <script> export default { methods: { handleTouchMove(e) { e.preventDefault(); // 可能还需要进一步处理触控移动的情况 } } } </script> ``` 2. **自定义滚动组件**：如果你只需要禁止单个元素的滚动，可以将滚动部分封装成一个组件，并在其内部处理触控事件。 3. **样式控制**：通过CSS也可以达到目的，例如设置overflow属性为hidden，或者使用position: fixed或absolute来锁定元素位置。 4. **利用第三方库**：有一些第三方的滚动插件允许你更精细地控制滚动行为，如`u-scroll`等。 记住，禁止滚动可能会影响用户体验，特别是对于内容较多的页面。所以在实际项目中，除非必要，最好提供替代的导航手段或明确告知用户无法滚动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值