×

ios下footer fixed定位的问题解决方案

作者:天空2019.07.10来源:Web前端之家浏览:7552评论:0
关键词:jsfixedfooter

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>

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js72734827394.html

网友评论文明上网理性发言 已有0人参与

发表评论: