为网站设计手机版,开源的 二次网站开发,北京网络排名优化,wordpress 超级折扣文章目录 问题解决代码 问题 最近用uniApp开发一款软件#xff0c;页面是可以滚动的长列表#xff0c;自定义组件弹窗遮罩出来后#xff0c;滑动屏幕#xff0c;页面也跟着滚动。研究了网上的解决办法 在遮罩层的最外层的view元素中加入 touchmove.stop.preventmoveH… 文章目录 问题解决代码 问题 最近用uniApp开发一款软件页面是可以滚动的长列表自定义组件弹窗遮罩出来后滑动屏幕页面也跟着滚动。研究了网上的解决办法 在遮罩层的最外层的view元素中加入 touchmove.stop.preventmoveHandle 或 catchtouchmovemoveHandle 亲有效但不太理想会导致弹窗和底层页面都不能滚动或者处理不当就报一些其他错误还是不太简便 解决 其实问题的根源是浏览器的滚动穿透问题目前还没有根本性办法解决但可以在弹窗遮罩出来时给最外层容器设置高度来解决亲测这个办法还是比较完美。 弹出遮罩时动态设置页面最外层容器style属性的height值为100vh。 这里最好使用单位vh100vh表示整个屏幕的高度因为页面没有超出一屏所以在弹窗上滑动时便不会触发底层的滚动事件自然不会再有滚动穿透的问题。 此做法需要自定义列表滚动容器也不是个很好的办法表示无解 代码
templateview classcontainer :styleshowMsk ? height: 100vh : !-- 滚动列表 --scroll-view scroll-ytrue/scroll-view!-- 自定义弹窗 --view v-ifshowMsk classmsk/view!-- 自定义弹窗 --!-- view v-ifshowMsk classmsk touchmove.stop.preventmoveHandle/view --/view
templatedata() {return {showMsk: false,};
},
methods: {moveHandle: {return false;}
}
