vue开发移动端app苹果手机的bug脱坑

最新推荐文章于 2024-03-29 02:51:47 发布

qq_37915717

最新推荐文章于 2024-03-29 02:51:47 发布

阅读量768

点赞数

文章标签： vue ios

本文链接：https://blog.csdn.net/qq_37915717/article/details/115304495

版权

本文总结了Vue开发移动端App时，在苹果设备上遇到的滚动不流畅、弹窗显示问题以及底部导航栏被遮挡的解决办法。通过修改CSS样式和使用安全距离属性来解决这些问题。

摘要由CSDN通过智能技术生成

vue开发移动端app 网页打包苹果app的坑总结

列表设置overflow:auto 后，滚动效果不流畅的问题

//可以在列表设置
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch; //在iOS中出现滚动卡顿问题

上诉解决方法还会出现一个问题，就是会导致在列表中如果有弹窗（position: fixed）会导致弹窗被覆盖或者覆盖不完全的问题,为此需要将弹窗放在列表外，下面为代码例子:

  <div class="quotation-easy-list list-padding flex flex-column">
    <div class="scroll-container">
      <div v-for="(item, index) in easyList" :key="item.id" class="quotation-easy-out-item" @click="slectRemove(item, index)">
        <div class="flex quotation-easy-item" @click="actionSheetListShow(item)" :class="preRemove ? 'pre-remove' : 'pre-remove-no-padding'">
          <div class="select" v-show="item.is_remove && preRemov