zoukankan      html  css  js  c++  java
  • vantui van-popup 在 ios 下 z-index 失效 vuescroll -webkit-overflow-scrolling: touch

    问题描述:

    基于vant ui 二次封装的 van-popup 组件,与vuescroll局部滚动结合使用,在ios某些版本手机呼出时无法覆盖上下布局的底部的导航条元素,设置z-index不起作用。

    //父容器采用flex垂直布局。
    <div class="root-container">
        <vuescroll>flex上下布局 ,高度为100vh - 底部导航高度的局部滚动</vuescroll>
        <div class="bottoom-container">底部导航</div>
    </div>

    问题原因:

    原因 ios系统下当设置-webkit-overflow-scrolling: touch 属性的元素发生弹性滚动时会导致 z-index 失效

    解决方法:

    1. 修改-webkit-overflow-scrolling 属性值为 auto;(ios滑动卡顿,不推荐)

    2. 将popup与底部导航元素放到同级,或者放在body下;(无法封装组件维护不友好)

    3. 在封装组件内部的popup上添加  get-container="body"  属性 (推荐)

    <van-popup
          v-model="showPicker"
          :close-on-click-overlay="false"
          position="bottom"
          get-container="body"
        >
          <van-datetime-picker
            v-model="selectedValue"
            type="time"
            :min-hour="6"
            @confirm="onConfirm"
            @cancel="onCancel"
            cancel-button-text="清空"
          />
        </van-popup>
    用心写代码,不辜负程序员之名。
  • 相关阅读:
    思念
    Matlab与C++混合编程,添加OpenCV库
    重新启用此博客
    将博客搬至CSDN
    unity探索者之ILRuntime代码热更新
    unity探索者之UGUI圆形图片组件
    unity探索者之UGUI图片描边
    unity探索者之iOS微信登录、分享
    unity探索者之复制内容到剪贴板
    unity探索者之获取设备当前电量
  • 原文地址:https://www.cnblogs.com/thinkingthigh/p/14506504.html
Copyright © 2011-2022 走看看