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

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

<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>