better-scroll基本使用

前言

最初利用原生js  通过内容高度大于容器高度 
自动实现滑动的特性实现滑动效果
.box {
  height: 200px;
  background-color: pink;
  /*overflow: hidden;*/
  overflow-y: scroll;
}
但是原生js实现的滑动效果在移动端会变得非常卡顿，
所以后来使用 iscroll  但是 iscroll 停止更新维护了，所以用在项目中不安全
有人根据iscroll编写出 better-scroll ，借鉴了iscroll 又在iscroll基础上增加了新特性 提高了性能

better-scroll使用：

基本使用

文档：http://ustbhuangyi.github.io/better-scroll/doc/
下载  npm install better-scroll
引入 import BScroll from ' better-scroll '
使用  :
		1、固定高度的容器box，并且设置overflow：hidden（容器中必须只有一个滑动的子标签）
		2、在mounted 生命周期中创建实例   new BScroll() 并传入两个参数   管理的容器对象box和配置对象
mounted() {
  new BScroll('.box', {})
}

配置 probeType:

 ====  probeType 是否显示滑动距离 ====
当滑动到某一位置时候,常常需要显示去顶部的图标,需要配置 probeType 属性
const bs = new BScroll('.box', {
  probeType: 3,
                      //  probeType 默认为0 不侦测位置
                      //  为1 不侦测位置，官方为 '非实时侦测位置'
                      //  为2 在手指滚定的时候侦测位置，当手指离开 惯性滚动时不侦测位置
                      //  为3 只要滚动都会侦测位置
然后监测 bs 的scroll 事件,会返回 position

bs.on('scroll', function (position) {
  console.log(position);
})

pullUpLoad 上拉加载

监测上拉加载 需要配置 pullUpLoad 属性

const bs = new BScroll('.box', {
  probeType: 3,
  pullUpLoad: true
然后监听 bs 的 pullingUp事件

bs.on('pullingUp', function () {
  console.log('上拉加载')
})
pullUp事件默认只可监测一次,若要多次监听,需要 bs.finishedPullUp()

bs.on('pullingUp', function () {
  console.log('上拉加载')
  setTimeout(function () {
    bs.finishPullUp()
  }, 3000);
})

refresh 加载异常的bug

有时候,由于图片是异步加载,better-scroll常常得到的高度是图片未加载出来的高度,当图片加载出来后,导致better-scroll 不能正常滑动,这时候就需要监听图片加载完成的事件,当图片加载完成后,发送事件,调用 better-scroll  的refresh() 方法,就可以重新计算滑动高度

this.scroll.refresh();

better-scroll封装

scroll 文件：
<template>
  <div ref="wrapper" class="wrapper">
    <div ref="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'

  export default {
    name: "Scroll",
    props: {
      scrollProbeType: {
        type: Number,
        default: 0
      },
      isPullingUp: {
        type: Boolean,
        default: false
      }
    },
    data: function () {
      return {
        scroll: null
      }
    },
    mounted() {
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true,
        probeType: this.scrollProbeType,
        pullUpLoad: this.isPullingUp
      });
      this.scroll.on('scroll', position => {
        this.$emit('scroll', position);
      });
      this.scroll.on('pullingUp', () => {
        this.$emit('pullUp');
      })
    },
    methods: {
      scrollTo(x, y, time = 300) {
        this.scroll.scrollTo(x, y, time)
      },
      finishPullUp() {
        this.scroll.finishPullUp();
      }
    }
  }
</script>

<style scoped>
</style>

使用

<Scroll class="scroll"
        ref="scroll"
        :scrollProbeType="3"
        :isPullingUp="true"
        @scroll="scrollHandle"
        @pullUp="contentPullUp">
  <!---banner--->
  <HomeBanner :banners="banners"></HomeBanner>
  <!--Recommend-->
  <RecommendView :recommendData="recommendData"></RecommendView>
    。。。
   </Scroll>

设置固定高度
.scroll {
    position: absolute;
    left: 0;
    right: 0;
    top: 45px;
    bottom: 49px;
}