用better-scroll来解决ios中html5页面fixed布局不兼容问题的处理

在做webapp的时候，会遇到顶部导航，底部按钮之类的需求，前端第一想到的就是fixed定位，在Android中是没有问题的，然而在ios中却不那么尽如人意。

给大家介绍一个方法，仍然使用fixed，只不过在需要滚动部分的外层再加一层div,也是fixed布局。这里需要用到better-scroll插件。

首先，来看一下页面：

html布局

顶部导航fixed部分

         <div class="nav">
            <ul class="ui-border-b">
                <li v-for='(item,index) in items' :class='{active:index===number}' class="tab-item">
                　　<span><a :dataNum="item.dataNum" @click.self="change(index,$event)" >{{item.name}}<font :class="item.class"></font></a></span>
                </li>
            </ul>
        </div>

中间滑动fixed部分,可下拉刷新

        <div class="scrollWrapper">
            <scroll  ref="foodgest" class="foodgest" :data="productData" :pullup="pullup" :beforeScroll="beforeScroll"   @scrollToEnd="loadMore">
                <div class="loadmoreBox">
                    <ul class="goodsLists">
                        <li class="lists ui-border-b" v-for='(item,index) in productData' @click="toDefault(index,item.productId)">
                        　　<div class="goodsImg">
                                <img v-lazy="item.headImage">
                            </div>
                            <div class="goodsInfo">
                                <p class="goodsTitle">{{item.name}}</p>
                                <div class="tagName"><span v-for='(markList,index) in item.markList'>{{markList.name}}</span></div>
                                <div class="goodsData">￥{{item.price}}<font>起</font><span>已售&nbsp;{{item.salesNum}}</span></div>
                            </div>
                        </li>
                    </ul>
                    <div slot="bottom" class="mint-loadmore-bottom">
                        <span>{{bottomText}}</span>
                    </div>
                </div>
            </scroll>
        </div>
style部分

     .nav{width: 100%;position: fixed;top:0;left:0;z-index: 4;background: #fff;height: 0.91rem;}
     .loadmoreBox{width: 100%;}
    .scrollWrapper{position: fixed;width: 100%;top: 0.89rem;bottom: 0;}
    .foodgest{height: 100%;overflow: hidden;}

大概的布局就是这样的，有不明白的可以私信我，在线的情况下会回复的