vue实践：better-scroll上拉加载数据后，上拉失效

我在做vue页面的时候遇到的这个问题，之前也遇到过当时给忽略了。

代码重现：

html：

      <div class="doctor-content" ref="doctorContentBox">
        <div>
          <div class="item" v-for="(item, index) in doctorList" :key="index">
            。。。
          </div>
        </div>
      </div>

js：

  mounted () {
    this.$nextTick(() => {
      setTimeout(() => {
        this.doctorBox = new this.$BScroll(this.$refs.doctorContentBox, {
          click: true,
          scrollX: false,
          scrollY: true,
          bounce: true,
          probeType: 3,
          pullUpLoad: {
            threshold: -30 // 当上拉距离超过30px时触发 pullingUp 事件
          }
        });
        /* 上拉加载更多 */
        this.doctorBox.on('pullingUp', () => {
          this.pages++;
          this.getDoctorList('', this.pages);
          this.doctorBox.finishPullUp(); // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次
        });
      }, 500);
    });
  },

在某些时候，这样的写法上拉加载后依旧可以上滑，切上滑不会失效，but，有时候就失效了。

问题描述：在设置上拉加载数据后，页面上上拉加载，函数getDoctorList执行，页面新添加数据，加载成功，但是，上拉此时不能往下滑动，只能在最初的那一个页面执行上下的滑动，也就是说滑不到最新加载的那些数据，而那些数据是存在页面上的。

解决：

/* 上拉加载更多 */
        this.doctorBox.on('pullingUp', () => {
          this.pages++;
          this.getDoctorList('', this.pages);
          this.doctorBox.finishPullUp(); // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次
          setTimeout(() => {
            this.doctorBox.refresh();
          }, 500);
        });

添加一个refresh函数，你也可以不用setTimeOut，但那样加载的过程会比较僵硬，没有一点弹性。