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

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 && preRemove" :class="item.removed ? 'active': ''">
            <i class="iconfont icon-dagou" v-show="item.removed"></i>
          </div>
          <span class="bold middle-font-size">{{item.name}}</span>
          <span v-show="!preRemove" class="bold middle-font-size" :class="item.down === 0 ? '': (item.down === 1 ? 'up-price': 'down-price')" >{{item.price}}</span>
          <span v-show="!preRemove" class="bold middle-font-size" :class="item.downSecond === 0 ? '': (item.downSecond === 1 ? 'up-price': 'down-price')" >{{item.point_price}}</span>
        </div>
      </div>
    </div>
    <!--这个组件是弹窗 类名为scroll-container的div是列表 存在-webkit-overflow-scrolling: touch属性  弹窗需要放在他的外面才不会被覆盖-->
    <action-sheet-list @emitAction="emitAction" :actionDescription="actionDescription" ref="ActionSheetList" :actionList="actionList"></action-sheet-list>
  </div>
  • 苹果底部会有一个黑色的小滑块,会导致底部导航栏被覆盖的问题,需要使用苹果的安全距离属性
    首先需要在html头部加上
<!-- viewport-fit=cover 为了解决ios安全距离 -->
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1,user-scalabel=0,viewport-fit=cover">

然后:在需要进行padding-bottom 或者 bottom 或者 margin-bottom处加上(padding-top top margin-top left right xxxxxx 等属性类似 只需要改safe-area-inset-xxxxx 就行了)

    // bottom: env(safe-area-inset-bottom); //苹果底部安全距离
    // bottom: constant(safe-area-inset-bottom); //苹果安全距离
    //padding-bottom: env(safe-area-inset-bottom); //苹果底部安全距离
    //padding-bottom: constant(safe-area-inset-bottom); //苹果安全距离
    <!--这个属性会导致padding-bottom 被覆盖, 在安卓上无效果 如果需要在安卓上默认有一个padding-bottom 需要再套一层div 加padding-bottom 或者其他解决办法-->
  • 这两行代码可以判断是否为ios终端
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  • 采用flex布局(即 body,html设置宽高100%, #app设置高度100%, 底部导航栏高度自适应, 内容(router-view)设置 flex:1 overflow: auto )进行整个app的架构开发的话,会导致苹果的***橡皮筋效果***越加明显,经过各种解决办法 目前只能先有一种办法 暂时解决(有小bug):
body,
html {
  width: 100%;
  height: 100%;

}
//只能给body设置fixed属性缓解橡皮筋效果
body {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

#app {
  height: 100%;
}
  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

qq_37915717

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值