移动端IOS不兼容的情况处理小结

一.vant的导航tab标签产生的ios不兼容问题：

1.用了vant的tab标签页，使用吸顶模式在苹果机上会出现一个返回此页面后列表顶部tab分类标签消失的情况：

正常样式

在苹果机上顶部的导航条标签消失了（使用的吸顶，浏览器渲染后结构里自动换成fixed属性）

 

    解决：考虑到页面的 fixed 元素失效，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了，倘若页面不会过长出现滚动，即便 fixed 元素失效，也无法跟随页面滚动，也就不会出现上面的问题了。所以我做了子元素内部滚动：

 

.content {
    /* main绝对定位，进行内部滚动 */
    position: absolute;
    top: 0;
    bottom: 0;
    right:0;
    left:0;
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性，可以增加弹性 */
    -webkit-overflow-scrolling: touch;
}


    

       
    
   

 

将页面分为两部分，导航条tab分类部分为顶部条固定死，没有fixed属性，下部为每个tab标签页的内容区域，占有一屏剩余的页面，写死，不涉及fixed属性，当内容区域的数据过多时，在内容区内部进行滚动，不会有父级超出一屏的时候，就不会有导航条数据消失的现象。

 

二.微信分享vue项目的H5页面，hash路由模式，苹果机出现第一次进入空白，点击刷新又成功出现页面，考虑到可能是ios系统可能没能正确处理路由#号，导致定位不到index.html唯一入口才会有这种空白页，于是给每个分享链接都加上了index.html 就解决了这个问题

。

三.mint-ui中的时间组件（dateTimePicker）在使用中发现：在IOS端会存在滚动穿透的问题（安卓端貌似没有存在） 

 

滑动时间弹框选择时间，父页面也跟着滚动

 

解决：

上面一行代码即为消除滚动穿透的关键 @touchmove.native.stop.prevent

 

 

 想起来的就这三个了，以后遇到和再想起来遇到过的苹果兼容问题再来记录，如果有更好的方法，请留言指教。