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

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>