better-scroll封装具有上拉加载、下拉刷新等组件(Vue)

使用方法:
	使用:
		将要滑动的内容放进组件标签内,作为插槽
		
	下拉刷新、上拉加载
		在该组件标签上自定义@loadRefresh='x',@loadMore='x'函数,作为下拉加载、上拉刷新回调函数
	
	回到顶部
		自定义临界值
	
	具体配置看代码注释

代码示例:

<template>
   <div class='scroll'>
     <div class='scroll-cont'>
        <slot x='jeff'></slot>
     </div>
     <div class='back' v-show='show' @click='backTop'>
         ↑
     </div>
   </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  name:'betterScroll',
  data(){
    return{
      scroll:null,
      show:false
    }
  },
  mounted()
  {
     this.$nextTick(()=>{
        this.scroll=new BScroll('.scroll',{
            probeType:2,
            click:true,
            //下拉刷新配置
            pullDownRefresh: { 
                threshold: 50,
                stop: 0
            },
            //上拉加载配置
            pullUpLoad:{
                threshold: 50
            }

        });

        //监听滚动事件
        this.scroll.on('scroll',(e)=>{
            //回到顶部按钮出现临界值
            this.show=-e.y>400?true:false
        })

        //监听下拉刷新
        this.scroll.on('pullingDown',()=>{
            
            this.$emit('loadRefresh')
            this.scroll.finishPullDown();
        })
        //监听上拉加载
        this.scroll.on('pullingUp',()=>{
            
            this.$emit('loadMore')
            this.scroll.finishPullUp();

        })

     })

  },
  methods:{
      //回到顶部
      backTop()
      {
        this.scroll.scrollTo(0,0,300);
      }
  }

}
</script>

<style scoped>
.scroll{
    /* 修改滚动区域 */
    height: 100vh;
    overflow: hidden;
}
.scroll>.scroll-cont{
    padding-top:50px;
}
.back{
    position: fixed;
    bottom:90px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: white;
    text-align: center;
    line-height: 50px;
    color:#FF8E96;
    border-radius: 50px;
    font-weight: bold;
    font-size:20px ;
    
}
</style>

自定义上拉加载、下拉刷新的节流防抖函数

    //上拉加载
    async _loadMore()
    {

      if(this.timer)
      {
        clearInterval(this.timer);
      }
      this.timer=setTimeout(() => {
      	网络请求操作
      
        console.log('加载触发了');  
      }, 1000);
      

    },
    //下拉刷新
    async _loadRefresh()
    {
      if(this.timer)
      {
        clearInterval(this.timer);
      }
      this.timer=setTimeout(()=>{
  		网络请求操作
  		
        console.log('刷新了');
      },1000);

    }