vue使用better-scroll

---

安装: npm install better-scroll

1、使用better-scroll的基本条件
必须包含两个大的div，外层和内层div
外层div设置可视的大小(宽或者高)-有限制宽或高
内层div，包裹整个可以滚动的部分
内层div高度一定大于外层div的宽或高，才能滚动

 // 默认情况下BScroll是不可以实时的监听滚动位置
  // probeType 侦测
  // 0,1都是不侦测实时的位置
  // 2: 在手指滚动的过程中侦测, 手指离开后的惯性滚动过程中不侦测.
  // 3: 只要是滚动, 都侦测.

pullUpLoad
类型：Boolean | Object，默认值：false
作用：这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机

pullUpLoade参数一定要配合pullingUp，finishPullUp使用，
pullingUp的触发时机是在一次上拉加载的动作后，一般用来去后端请求数据。
finishPullUp则是当上拉加载数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载，若没有调用此方法，则上拉加载的动作执行完一次就不能再次执行了

注意:： better-scroll不能再created（）{}里使用，因为此时还没有渲染页面DOM树，应在mounted（）{}中使用

---

scroll.vue

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  export default {
    name: "Scroll",
    props: {
      probeType: { type: Number,   default: 0 },
      pullUpLoad: { type: Boolean,  default: false }
    },
    data() {
      return {  scroll: null,   message: '哈哈哈' }
    },
    mounted() {
      // 1.创建BScroll对象
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true,
        probeType: this.probeType,
        pullUpLoad: this.pullUpLoad
      })
      // 2.监听滚动的位置
      this.scroll.on('scroll', (position) => {
        // console.log(position);
        this.$emit('scroll', position)
      })
      // 3.监听上拉事件
      this.scroll.on('pullingUp', () => {
        this.$emit('pullingUp')
      })
    },
    methods: {
      scrollTo(x, y, time=300) {
        this.scroll.scrollTo(x, y, time)
      },
      finishPullUp() {
        this.scroll.finishPullUp()
      }
    }
  }
</script>
<style scoped>
</style>

Home.vue

<template>
  <div id="home" class="wrapper">		// class="wrapper"
    <scroll class="content"
            ref="scroll"
            :probe-type="3"
            @scroll="contentScroll"
            :pull-up-load="true"
            @pullingUp="loadMore">
      <tab-control class="tab-control"
                   :titles="['流行', '新款', '精选']"
                   @tabClick="tabClick"/>
      <good-list :goods="showGoods"/>
    </scroll>
    <div>呵呵呵呵</div>
  </div>
</template>

<script>
  import TabControl from 'components/content/tabControl/TabControl'
  import GoodList from 'components/content/goods/GoodsList'
  import Scroll from 'components/common/scroll/Scroll'
  import { getHomeMultidata, getHomeGoods } from "network/home"

  export default {
    name: "Home",
    components: {  TabControl, GoodList,	Scroll, },
    data() {
      return {
        banners: [],
        recommends: [],
        goods: {
          'pop': {page: 0, list: []},
          'new': {page: 0, list: []},
          'sell': {page: 0, list: []},
        },
        currentType: 'pop',		// currentType: 记录滑块到哪个类
        isShowBackTop: false
      }
    },
    computed: {  showGoods() {  return this.goods[this.currentType].list  } },
    created() {
      // 1.请求多个数据
      this.getHomeMultidata()
      // 2.请求商品数据
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
    },
    methods: {
      /** 事件监听相关的方法 */
      tabClick(index) {
        switch (index) {
          case 0:	this.currentType = 'pop';  break
          case 1:  this.currentType = 'new';  break
          case 2:  this.currentType = 'sell';  break
        }
      },
      loadMore() {
        this.getHomeGoods(this.currentType)
      },
      /** 网络请求相关的方法 */
      getHomeMultidata() {
        getHomeMultidata().then(res => {
          this.banners = res.data.banner.list;
          this.recommends = res.data.recommend.list;
        })
      },
      getHomeGoods(type) {
        const page = this.goods[type].page + 1
        getHomeGoods(type, page).then(res => {
          this.goods[type].list.push(...res.data.list)
          this.goods[type].page += 1
          this.$refs.scroll.finishPullUp()
        })
      }
    }
  }
</script>

<style scoped>
  #home { height: 100vh; position: relative;  }
  .tab-control { position: sticky;  top: 44px;   z-index: 9; }
  .content {
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }
</style>