当uniapp遇上滚动穿透，巧妙的解决方式~

上一次遇上这个滚动穿透，我是暴力解决的，当uniapp遇上可恶的滚动穿透的时候，我是怎么暴力解决的，今天学会了一个巧妙的方式，几行代码，超级方便好用，爱了爱了…

就是利用page-meta标签的page-style属性！

page-meta 的page-style属性相当于HTML的body属性，这个点很重要，之前我想要通过body{overflow:hidden;}的方式动态修改overflow的属性去停止页面的滚动，但是那时不知道怎么动态修改body的属性，而且如果使用document的方式去修改body的属性，在移动端真机会报错，拿不到body，真的很头疼，直到让我发现了page-style，实在是太好用了！！！

具体的解决方式：

<template ><view class="" ><page-meta :page-style="spanStyle"></page-meta></view>
</template>
<script >export default {data() {return {spanStyle:"overflow:auto"}},methods: {mask(data){//当蒙层弹起时，固定界面禁止滚动，当蒙层关闭时，允许滚动if(data){this.spanStyle="overflow:hidden";}else{this.spanStyle="overflow:auto";}}}}
</script>

这方法爱了爱了…
也许是我懂得太少了，加油鸭！

当uniapp遇上滚动穿透，巧妙的解决方式~相关推荐

关于移动端滚动穿透问题的解决
关于移动端滚动穿透问题的解决移动端滚动穿透问题:在移动端进行fixed弹窗的时候,在弹窗上滑动会导致下层页面跟着滚动,影响用户体验,这种现象称为'滚动穿透'. 三种解决办法中,视需求选择解决办法: ...
NAT的全然分析及其UDP穿透的全然解决方式
NAT的全然分析及其UDP穿透的全然解决方式一:基本术语防火墙防火墙限制了私网与公网的通信,它主要是将(防火墙)觉得未经授权的的包丢弃,防火墙仅仅是检验包的数据,并不改动数据包中的IP地址和 ...
transporter上传卡正在交付_Xcode11使用Transporter上传AppStore时卡住解决方式，亲测可用...
Xcode11使用Transporter上传AppStore时卡住解决方式,亲测可用在Authenticating with the iTunes store(即AppStore认证)卡住解决办法 ...
Adobe Flash Player安装遇上错误:未能初始化的解决方法
flash分为IE内核和非IE内核卸载干净计算机残留文件第一.开始--设置--控制面板--双击添加与删除程序卸载掉flsh等相关文件第二C:\WINDOWS\system32\Macromed ...
隐藏浏览器滚动条但内容可以滚动的3种解决方式（简单清晰）
第一种:使用纯css样式属性隐藏滚动条 :火狐浏览器的css写法不兼容 <!DOCTYPE html> <html lang="en"> <head ...
关于应用logo在小米手机上不显示新logo解决方式
遇到这样的问题项目应用logo改变了,使用的是新的logo,别的手机上都没有问题,就是小米手机会存在问题:最后发现是这样的,小米手机上应用安装的时候先去小米应用商店上去获取商店中旧的图标然后替换掉清单 ...
uniapp 微信小程序和H5的弹窗滚动穿透解决
滚动穿透: 页面里的弹窗也是可以滚动的,然后页面本身内容多所以也是滚动的,就造成,在弹窗滚动的时候,页面内容也跟着滚动了.如图所示 ps: 电脑端分鼠标滚轮滚动和长按鼠标拖拽滚动,手机端只有触屏滑屏滚 ...
页面无法滚动_【前端词典】滚动穿透问题的解决方案
点击上方"前端真好玩",喜欢他就关注他听说,看恺哥的文章会上瘾背景产品有三宝,弹窗,浮层加引导: 设计有三宝,透明,阴影加圆角: 运营有三宝,短信,推送加红包: 程序员有一宝 ...
html页面滚动导致阴影出现,三种处理滚动穿透问题方案的对比
背景产品有三宝,弹窗,浮层加引导: 设计有三宝,透明,阴影加圆角: 运营有三宝,短信,推送加红包: 程序员有一宝,这个做不了. 随着移动端市场的份额越大,需求就越多样化.我们今天讨论的是移动端的滚动 ...

当uniapp遇上滚动穿透，巧妙的解决方式~

当uniapp遇上滚动穿透，巧妙的解决方式~相关推荐

最新文章

热门文章