功能场景

我目前是在用uniapp做一个H5程序，中间有一个排行榜的页面只展示前十名，但是里面的导航是自定义导航栏，会占据文档流的位置，所以背景图宽高固定为100vh 100vw会导致页面比较晃（上下晃动），有损美观，就想办法不让页面出现滚动，我百度了两个方法：

第一个方法"app-plus":{“bounce”:“none”}

在pages.json页面中：将回弹属性关掉，禁止页面下拉显示空白

{"path" : "pages/mine/mine","style" : {"navigationBarTitleText": "我的","navigationStyle":"default","navigationBarBackgroundColor":"#FFFFFF","navigationBarTextStyle":"black","enablePullDownRefresh":false,"app-plus":{"bounce":"none" // 将回弹属性关掉}}
},

但是不知道为什么，我使用这个方法好像不太管用，也可能是因为我是H5页面的原因，因为没时间整理，我就没深思，我紧接着百度了其他方法

第二个方法

// 阻止页面滚动
stop(){var box=function(e){passive: false ;};document.body.style.overflow='hidden';document.addEventListener("touchmove",box,false);
},
// 允许页面滚动
move(){var box=function(e){passive: false };document.body.style.overflow=''; // 出现滚动条document.removeEventListener("touchmove",box,false);
},

在methods里面CV这个方法，然后直接在onLoad中调用就可以了

但是这个方法有一个bug，就比如你只想让首页中点击排行榜进入的页面禁止滚动，然后你会发现，你返回首页的时候，首页的页面也不被禁止滚动了，不仅是首页，所有的页面都被禁止滚动了，这个时候你需要在页面中增加一个监听离开页面的事件，在这个事件中CV上面的允许页面滚动方法。
但是…救命啊家人们，为什么我在页面上写上onHide()和onUnload()事件都没触发呢？！！我要怎么写才能监听用户离开页面

写完这俩方法后，我返回上一页，这俩事件一点反应都没有[哭哭]，写着写着把自己绕进去了（博客里为啥没有办法发表情，算了…截个图吧）

uniapp禁止页面上下滚动相关推荐

H5禁止页面滑动/滚动
禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否禁止页面滚动有三种方法 1,依靠css 将页面 document.documentElement.style.overflow='hi ...
弹窗时候禁止页面滚动
2019独角兽企业重金招聘Python工程师标准>>> 1.依靠css 将页面 document.documentElement.style.overflow='hidden'; ...
vue弹层时禁止页面滚动
创建组件时禁止页面滚动: created(){//禁止页面滑动document.body.addEventListener('touchmove', this.bodyScroll, { passiv ...
蒙层禁止页面滚动的方案
蒙层禁止页面滚动的方案弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是在蒙层出现的时候滚动页面,如果不加处理,蒙层底部的页面会开始滚动,实际上我 ...
JQuery弹出菜单时禁止页面（body）滚动
最近在做手机端的弹出菜单,但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去,体验非常不好,所以查了一下弹出菜单时禁止页面滚动的方法,整理如下: 方法一:弹出菜单时给body和html添加一个 ...
vue中禁止页面滚动/滚动事件穿透
1.移动端在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.prevent></div ...
html js控制页面蒙版,javascript实现蒙版与禁止页面滚动
本文实例为大家分享了javascript实现蒙版与禁止页面滚动的具体代码,供大家参考,具体内容如下项目需求:页面很长,要求加个蒙版,点击特定位置蒙版消失可以滑动页面,否则蒙版存在页面不可以滑动:要同 ...
vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决
弹出层时,蒙版下还可以滚动页面移动端在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.preve ...
滚动旋钮时禁止页面滚动-jquery.knob.js
jquery.knob.js一款很棒的jquery旋钮插件 gayhub地址:https://github.com/aterrien/jQuery-Knob 当鼠标滚轮作用于旋钮时,禁止页面滚动 $( ...

uniapp禁止页面上下滚动

uniapp禁止页面上下滚动

功能场景

第一个方法"app-plus":{“bounce”:“none”}

第二个方法

uniapp禁止页面上下滚动相关推荐

最新文章

热门文章