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人参与
发表评论: