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%;
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/232141.html原文链接：https://javaforall.net
