收藏
评论

模态窗以及弹出层相关ui布局的一个小技巧

场景:在web开发以及一般的小程序中遇到模态窗或者弹出层等ui布局的时候,会有在遮罩层上滑动引发下面页面的滑动这一问题。在小程序上这一问题可能还会导致下拉刷新或上拉加载的回调触发。
现有解决方案:1.手动阻止滑动事件(这样需要做在弹层上其他事件的兼容处理)2.特殊处理布局(当有弹出层的时候最外一层的高度设为100vh并overflow:hidden)。
优化方案:弹出层以及内部的组件都用cover-view以及cover-image实现。
原理:cover-view是原生组件,当用它实现铺满整个页面的遮罩层时,滑动事件是发生在原生视图层面上的,不会触发在webview渲染层页面的滑动,自然就不会出现上述问题。

收藏

2 个评论

  • Jcs
    Jcs
    2019-01-22

    实用

    2019-01-22
    赞同
    回复
  • TNT
    TNT
    2019-01-09

    66666

    2019-01-09
    赞同
    回复
登录 后发表内容