微信小程序存在scroll-view为外层时,制作模拟框(全页面变成透明的黑色,出现一个模拟框)的兼容性问题

    要在小程序里面制作一个模拟框效果很简单,只需要写2层固定定位,一层为你想要制作的模拟框,另一层为黑色的背景。然后将模拟框的z-index写的比黑色的背景的z-index大就可以了。

    如果只想要做一个这样的效果是很简单的,但是要是在一个大的项目里面再考虑制作这种模态框的问题时就要留心了,特别是在有scroll-view(scroll-view的属性有scroll-y,高度写100vh的时候,这种属性是用来下拉刷新用的)的情况下.

    现在我们就来探讨一下这种情况下的问题。同样的,在制作模拟框的时候,还是按照先前的写法,在android手机里是没有任何问题的。但是这时候使用ios手机进行操作时就会有一个BUG——在出现模拟框的情况下,还是可以下拉页面,下拉没有出现模拟框前的页面。这样对用户的体验肯定是不好的,这时候,我们可以给最外层的view或其他元素添加一个固定定位,position:fixed;left:0;top:0.,这样写就没问题了吗?还没有,再次打开模拟框时还是会出现这种情况。

    其实这个时候的主要问题是scroll-y的存在,由于ios手机的兼容性较差,所以出现固定定位失效的问题。这个时候我们可以将scroll-view的scroll-y属性从true和false之间改变,当打开模拟框时,使用js动态改变scroll-y的值,为false.关闭时改变为true。这样写就达成效果了。

猜你喜欢

转载自blog.csdn.net/zero_person_xianzi/article/details/79310754