vue ios滚动不流畅问题

图片.png

由于本人是Android开发工程师，所以对这个不流畅的猜测是，ios本身的布局是有伸缩性，当vue的列表滚动的时候，会发生滚动冲突，所以才导致的不流畅（纯属个人臆测，欢迎打脸）。

由于我的项目一开始用的mint-ui里面的上拉刷新下拉加载，mint-ui又没有使用better-scroll,所以很蛋疼，改起来很麻烦，尤其对我我这种半路出家的。

在几经周折之后，终于痛下决心用了 滴滴的组件库 cube-ui。

用起来也很方便，需要注意的一点就是 <Scroll></Scroll>外层标签要给写死个高度，高度要小于<Scroll></Scroll>的高度

<div :style="{ 'height': wrapperHeight + 'px'}" class="scroll_content">
     <Scroll
            :data="list"
            :scroll-events="scrollEvents">
            <ul class="ul_class">
              <li v-for="(item,index) in list">
        ...
              </li>
            </ul>
          </Scroll>
 </div>

我这里的wrapperHeight是这个div顶部到屏幕底部的距离，动态算出来的。这样就能保证列表能铺满了。

算的方法如下：

  this.wrapperHeight = document.documentElement.clientHeight - 88;
  window.onload = () => {
    this.wrapperHeight = document.documentElement.clientHeight - 88;
  };

算是无奈的双重保险吧，因为有的机型在调用钩子函数，activated、mounted等方法的时候还没有渲染完成，导致 document.documentElement.clientHeight 是0。