better-scroll学习，看了一些教程，根据自己的项目需求，封装了一个简单的滚动（个人笔记）

注释掉的是下拉刷新，因为项目暂时不需要所以注释了，可能有漏掉括号什么的，内容比较简单，小白前端做的，所以仔细看一下都能懂什么意思

<template>
  <div class="scroll" ref="divScroll">
    <div class="scroll-detail flex" ref="detailScroll">
      <!-- 刷新提示信息 -->
      <!-- <div class="top-tip">
                <span class="refresh-hook">{{pulldownMsg}}</span>
      </div>-->
      <slot name="list"></slot>
      <slot name=empty></slot>
      <!-- 底部提示信息 -->
      <div class="bottom-tip" v-show="maxScrollY != 0">
        <span class="loading-hook">{{pullupMsg}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
  props: {
    //用于做上拉加载功能，默认为 false。
    pullUpLoad: {
      type: Boolean,
      default: false
    },
    //1：非实时（屏幕滑动超过一定时间后）派发scroll 事件 
    //2：在屏幕滑动的过程中实时的派发 scroll 事件
    //3：不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件 （我是选3）
    //0：即不派发 scroll 事件。
    probeType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      //上下拉加载的状态
      pulldownMsg: "下拉刷新",
      pullupMsg: "加载更多",
      scroll: null,
      //最大滚动距离
      maxScrollY: 0
    };
  },
  mounted() {
    //滚动加载
    this.scroll = new BScroll(this.$refs.divScroll, {
      probeType: this.probeType,
      click: true,
      pullUpLoad: this.pullUpLoad
    });
    // 滑动过程中事件
    // this.scroll.on('scroll',(pos)=>{
    //     if(pos.y > 10){
    //         this.pulldownMsg = '释放立即刷新'
    //     }
    // });
    //滑动结束松开事件
    this.scroll.on("touchEnd", pos => {
      //下拉刷新
      // if(pos.y > 10){
      //     setTimeout(()=>{
      //         parent.getData().then((res)=>{
      //             //刷新数据
      //             parent.list = res;
      //             //恢复刷新提示文本值
      //             that.pulldownMsg = '下拉刷新'
      //             //刷新成功后提示
      //             that.refreshalert();
      //             //刷新列表后，重新计算滚动区域高度
      //             that.scroll.refresh();
      //         })
      //     },1000)
      // }
      // else
      
      this.maxScrollY = this.scroll.maxScrollY;
      if(this.maxScrollY != 0) {
        if (pos.y < this.scroll.maxScrollY - 10) {
          //上拉加载
          this.pullupMsg = "加载中...";
          setTimeout(() => {
          	  //调用父组件的相关方法，基本就是获取新的数据
              this.$emit('pullingUp')
          }, 1000);
        }
      }
    });

  },
  methods: {
    //刷新成功提示
    // refreshalert(){
    //     this.$toast({message:'刷新成功！', duration: 800})
    // },
    //更新
    scrollRefresh() {
      this.scroll.refresh();
    },
    //上拉加载
    finishPullUp() {
    	//上拉加载
        this.scroll.finishPullUp();
        //变更上拉加载显示的问题在
        this.pullupMsg = "加载更多";
        //数据变多，导致bs的高度变大，所以需要刷新一下bs（bs即better-scroll）
        this.scrollRefresh();
    },
    //获取滚动位置
    getScrollY() {
      return this.scroll ? this.scroll.y : 0
    },
    //回到指定位置
    scrollTo(scrollX, scrollY, time) {
      let x = scrollX || 0;
      let y = scrollY || 0;
      this.scroll && this.scroll.scrollTo(x, y, time);
      this.scrollRefresh();
    }
  }
};
</script>
<style lang="scss" scoped>
.scroll {
  .scroll-detail {
    width: 100%;
    flex-direction: column;
    align-items: center;
    /* 下拉、上拉提示信息 */
    .top-tip {
      position: fixed;
      top: -0.8rem;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      color: #555;
    }

    .bottom-tip {
      width: 100%;
      height: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      color: #777;
      position: fixed;
      bottom: -1rem;
      left: 0;
    }
  }
}
</style>