移动端滚动插件better-scroll的使用

BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件（GitHub地址），适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。
为了满足这些场景，它不仅支持惯性滚动、边界回弹、滚动条淡入淡出等效果的灵活配置，让滚动更加流畅，同时还提供了很多 API 方法和事件，以便我们更快地实现滚动场景下的需求，如下拉刷新、上拉加载。
由于它基于原生 JavaScript 实现，不依赖任何框架，所以既可以原生 JavaScript 引用，也可以与目前前端 MVVM 框架结合使用，比如，其官网上的示例就是与 Vue 的结合。
1.html代码：

<div class="wrapper" ref="wrapper">
    <ul class="content" ref="content">
      <li v-for="(item,key) in detail" :key="key" v-if="detail.length > 0">
        <Row type="flex" justify="start" align="middle">
          <Col :span="8" class="detail-item">
          <span :class="{'color-red':item.is_delay === 1}">{{item.order_sn}}</span>
          </Col>
          <Col :span="8" class="detail-item">
          <span>{{item.date}}</span>
          </Col>
          <Col :span="8" class="detail-item">
          <span>￥ {{item.partner_profit  | number2}}</span>
          </Col>
        </Row>
      </li>
      <li v-if="!scrollFinish">
        <Row type="flex" justify="center" align="middle">
          <Col :span="6" v-if="loadingText">
          <p>{{loadingText}}</p>
          </Col>
          <Col :span="2" v-else>
            <Spin size="large"></Spin>
          </Col>
        </Row>
      </li>
    </ul>
</div>

2、js代码

mounted() {
      // 设置wrapper的高度
      this.$refs.wrapper.style.height = document.getElementById("app").offsetHeight - document.getElementById("scroll").offsetTop + "px";
      // better-scroll 的content高度不大于wrapper高度就不能滚动,这里的问题是,当一页数据的高度不够srapper的高度的时候,即使存在n页也不能下拉
      // 需要设置content的min-height大于wrapper高度
      this.$refs.content.style.minHeight = this.$refs.wrapper.offsetHeight + 1 + "px";
      this._initScroll();
      this.getIncomeDetail(this.nextPage);
      // 设置scroll的高度
      // this.scrollHeight = document.getElementById("app").offsetHeight - document.getElementById("scroll").offsetTop ;
    },
methods:{
    _initScroll() {
        this.orderScroll = new BScroll(this.$refs.wrapper, {
          probeType: 3,    
          click:true,
          pullUpLoad: {   // 配置上啦加载
            threshold: -80   //上啦80px的时候加载
          },
          mouseWheel: {    // pc端同样能滑动
            speed: 20,
            invert: false
          },
          useTransition:false,  // 防止iphone微信滑动卡顿
        });
        // 上拉加载数据
        this.orderScroll.on('pullingUp',()=>{
          this.scrollFinish = false;
          // 防止一次上拉触发两次事件,不要在ajax的请求数据完成事件中调用下面的finish方法,否则有可能一次上拉触发两次上拉事件
          this.orderScroll.finishPullUp();
          // 加载数据
          this.getIncomeDetail(this.nextPage);
        });
      }
}

3.注意
    当 content 的高度不超过父容器的高度，是不能滚动的 

4.better-scroll文档