ios下footer fixed定位,页面向下scroll时footer不实时渲染问题。
<div class="home"> <div class="banner"> <div class="search" @click="goToSearch" > <i /> </div> <div class="name"> <i /> xxx </div> </div> <div class="tabs"> <div v-for="(item,index) in tabs" :key="index" class="tab" > <i /> {{ item }} </div> </div> <div class="recommend" ref="recommend" > <div class="title"> xxxx </div> <div class="card" v-for="(item,index) in list" :key="index" > <div class="name"> {{ item.name }} </div> <div class="info"> <span>xx:<b>{{ item.xxx }}</b>个</span> <span>xx:<b>{{ item.xx }}</b>项</span> <span>xx:<b>{{ item.xx }}</b>项</span> </div> <div class="address"> 地址:{{ item.address }} </div> <div class="address"> 电话:{{ item.phone }} </div> <i /> </div> </div> <Footer current="0" /> </div>
因为ios下关闭了滚动实时触发属性,所以h5在ios下会有抖动问题。当滚动结束,footer才显现。
一直以为需要通过js才能解决,没想到改变下布局就完美解决啦~
footer与内容区不要在同一层级下布局,而是要高于页面内容区即可。
<div> <div class="home"> <div class="banner"> <div class="search" @click="goToSearch" > <i /> </div> <div class="name"> <i /> xxx </div> </div> <div class="tabs"> <div v-for="(item,index) in tabs" :key="index" class="tab" > <i /> {{ item }} </div> </div> <div class="recommend" ref="recommend" > <div class="title"> xxxx </div> <div class="card" v-for="(item,index) in list" :key="index" > <div class="name"> {{ item.name }} </div> <div class="info"> <span>xx:<b>{{ item.xxx }}</b>个</span> <span>xx:<b>{{ item.xx }}</b>项</span> <span>xx:<b>{{ item.xx }}</b>项</span> </div> <div class="address"> 地址:{{ item.address }} </div> <div class="address"> 电话:{{ item.phone }} </div> <i /> </div> </div> </div> <Footer current="0" /> </div>
网友评论文明上网理性发言 已有0人参与
发表评论: