uniapp禁止页面上下滚动
uniapp禁止页面上下滚动的方法
·
uniapp禁止页面上下滚动
功能场景
我目前是在用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()事件都没触发呢?!!我要怎么写才能监听用户离开页面
写完这俩方法后,我返回上一页,这俩事件一点反应都没有[哭哭],写着写着把自己绕进去了(博客里为啥没有办法发表情,算了…截个图吧)
更多推荐
已为社区贡献1条内容
所有评论(0)