betterScroll的使用

 >>>>>betterScroll in github<<<<<

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

/*
上面的代码中 BetterScroll 是作用在外层 wrapper 容器上的，滚动的部分是 content 元素。这里要注意的是，BetterScroll 默认处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。不过对于 BetterScroll v2.0.4 版本，可以通过 specifiedIndexAsContent 配置项来指定 content，详细的请参考文档。

*/

 

  new BScroll('.bs-wrapper', {
    //...
    observeDOM: true // 开启 observe-dom 插件
  })

 .content 没有设置高度，插件无效（必须设置高度）。

图片没有加载完，所以不能正常滚动，解决这个问题需要设置observeDOM属性。

2、增加BackTop组件（页面右下角回到顶端的功能）

backTop按需要再scroll中增加：click：true才能使用。注意，button不需要试着

讲bacltop组件增加挂载到home.vue组件中，

设置在honm.vue中设置backtop组件的点击事件（自定义组件在vue2中无法直接用@click监听，需要用到@click.native，VUE3中可以直接使用？？）；（还有一种方法，就是在直接在backtop组件中监听点击，$emit将自定义事件传入home.vue中，在处理相关的方法）

需要使用scroll对象中的scrollTo（x,y，time）方法

在home.vue中使用better-scroll对象方法，home中的my-scroll是better-scroll对象的实例，监听他的滚动。通过设置ref，获取该对组件，在获取组件的scroll属性就是scroll对象，再使用scroll的scrollTo方法，再获取相关方法进行数据处理。

this.$refs.myscroll.scroll.scrollTo(0, 0, 500);
//.scrollTo(x,y,time)

2-2实现backtop组件（按钮）的显示和隐藏。

设置组件的probeType值（此处不能写死，影响复用，方法是在使用的组件中传入probeType的值（1/2/3），子组件设置一个props，接收）

  props: {
    probeType: {
      type: Number,
      default: 1,
    },
  },
//
this.scroll = new BScroll(this.$refs.wrapper, {
      click: true, //不限制button，限制div等等
      // mouseWheel: true,
      observeDOM: true,
      probeType: this.probeType,
    });

//home
<my-scroll class="content" ref="myscroll" :probeType="3">

需要监听滚动，

this.scroll.on('scroll',position=>{ console.log(position)})

此时监听滚动是在myscroll组件中，需要把监听到数据发送到父组件中。$emit()

 home中监听自定义事件，获取到position的值

注意，position是一个对象，分别有x,y两个属性值。

通过对position.y的值进行处理，配合backtop的v-show使用。

   contentscroll(position) {
      // console.log(-position.y);
      //判断是否隐藏
      this.isShowBacktop = -position.y > 1000;
    },

//
  <back-top @click.native="backclick" v-show="isShowBacktop"></back-top>

3.实现上拉加载更多功能；

使用better-scroll中pullUpLoad功能；

当页面上拉到页面底部时，触发回调函数,再进行相关业务的处理

//事件：pullingUp 
 this.scroll.on("pullingUp", () => {
      this.$emit("pullingUp");
      //this.scroll.finishPullUp()//在使用端控制 finishpullup
    });

需要特别注意是，滚动的组件分为3个部分，在哪个界面下就要在加载哪个界面的对应数据。

 

@pullingUp="loadMore"

loadMore() {
      this.getHomeGoods(this.curgoodstype); //curgoodstype是自定义属性保存type
    },