实现首页的上拉加载

为了实现首页上的商品拖动即可加载更多，那么在better-scroll中即需要用到pullUpLoad，这个配置用于做上拉加载功能，当设置其为true或者是一个Object的时候，可以开启上拉加载。可以配置（threhold）来决定开始加载的时机，当上拉加载数据加载完毕后，需要执行finishPullUp方法。finishPullUp的作用当上拉加载数据加载完毕后，需要调用此方法告诉better-scroll数据已加载。

首先，我先在scroll组件当中做出了如下操作：

props:['probeType',"pullUpLoad"]

那我们只需要在所需要的父组件中，去设置pullUpload的值即可。

  mounted(){
    //1.创建BScroll对象
this.scroll = new BScroll(this.$refs.wrapper,{
click:true,
  probeType:this.probeType,
 //监听滚动到底部
  pullUpLoad:this.pullUpLoad
})
    // this.scroll.scrollTo(0,0)
    //2.监听滚动的位置
    this.scroll.on("scroll",(position)=>{
      // console.log(position);
      this.$emit("scroll",position)
    })
//监听滚动到底部
if(this.pullUpLoad){
  this.scroll.on("pullingUp",()=>{
    // console.log("监听");
    this.$emit("pullingUp")
  })
    }
  }

 methods:{
    finishPullUp(){
      this.scroll.finishPullUp()
    }
  }

那么在home.vue中我们可以做如下设置：

<scroll class="content" ref="scroll" :probe-type="3" @scroll="contentscroll" :pull-up-load="true" @pullingUp="loadmore">

methods:{
   loadmore(){
    this.gethomegoods(this.currenttype)
   }，

gethomegoods(type){
  const page = this.goods[type].page + 1
  gethomegoods(type,page).then(res =>{
    // console.log(res);
    // res =>pop的第一页
    this.goods[type].list.push(...res.data.data.list)
    this.goods[type].page+= 1
    //完成上拉加载更多
    this.$refs.scroll.finishPullUp()
     })

}

这样即可实现了首页的上拉加载。