功能场景

我目前是在用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()事件都没触发呢?!!我要怎么写才能监听用户离开页面
在这里插入图片描述
写完这俩方法后,我返回上一页,这俩事件一点反应都没有[哭哭],写着写着把自己绕进去了(博客里为啥没有办法发表情,算了…截个图吧)
在这里插入图片描述

Logo

为武汉地区的开发者提供学习、交流和合作的平台。社区聚集了众多技术爱好者和专业人士,涵盖了多个领域,包括人工智能、大数据、云计算、区块链等。社区定期举办技术分享、培训和活动,为开发者提供更多的学习和交流机会。

更多推荐