在做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>已售 {{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;}
大概的布局就是这样的,有不明白的可以私信我,在线的情况下会回复的