微信小程序存在scroll-view为外层时,制作模拟框(全页面变成透明的黑色,出现一个模拟框)的兼容性问题
2018-02-11 16:07
786 查看
要在小程序里面制作一个模拟框效果很简单,只需要写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。这样写就达成效果了。
如果只想要做一个这样的效果是很简单的,但是要是在一个大的项目里面再考虑制作这种模态框的问题时就要留心了,特别是在有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。这样写就达成效果了。
相关文章推荐
- 【微信小程序】解决 竖向<scroll-view>组件 “竖向滚动页面出现遮挡”问题
- 微信小程序开发(5)-新闻页之滚动制作(scroll-view)组件的使用
- 微信小程序出现wx.navigateTo页面不跳转问题的解决方法
- 如何解决iphone手机微信浏览器中滑动到页面底部出现黑色背景盖住position:fixed的页面元素的问题?
- 微信小程序 —— 解决自定义弹窗出现后,蒙层下的页面仍可以滚动的问题
- 5.0及以上系统上使用CircleImageView圆形头像出现方块背景问题(上一个Activity中的页面)
- NestedScrollView + RecyclerView实现的页面,解决出现的问题
- wsSearchView:一个简单方便的微信小程序搜索框页面组件
- 微信小程序scroll-view bindscrolltoupper & bindscrolltolower不响应的问题
- iphoneX,push进入一个webview, 页面底部出现一个黑色区域解决方案
- 解决微信小程序组件scroll-view中bindscrolltolower事件触发不了的问题
- 微信小程序实现页面内的跳转——scroll-view
- 一个页面放2段图片滚动代码出现冲突的问题如何解决
- 对异常处理中的一个问题的思考(出现异常,程序仍能继续运行)
- 写了一个查询数据库的程序,不熟的Tomcat6。查询条件为英文时运行正常,为中文时出现乱码。后在tomcap的server.xml中加入useBodyEncodingForURI="true解决了问题
- 使用window.close关闭窗口后,出现一个新的页面问题
- 解决一个页面同时存在ScrollView和Viewpager时viewpager页面滑动不畅
- present 一个页面后 使用pushviewcontroller的问题
- 最近一个工程出现的问题 以前工程可用的代码到这个工程里也会显示 The following classes could not be found: - ImageView (Change to and
- 关于证书布置好了出现“无法将这个证书验证到一个受信任的证书颁发机构”及页面内容混搭问题