better scroll组件封装好的可以拿去直接用的

//这个组件是封装好的区域滚动组件;可以直接拿去用
//当然了在用用之前的线安装: cnpm install better-scroll --save

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

<script>
  import BScroll from 'better-scroll'
  export default {
    name: "Scroll",
    data(){
      return{
        scroll:null,
      }
    },
    props:{
      probeType:{
        type:Number,
        default:0
      },
      pullUpLoad:{
        type:Boolean,
        default: false
      }
    },

　　//BScroll对象必须放在mounted生命周期函数里;也就是说等待模板创建完毕了以后才获取到this.$refs.wrapper
    mounted() {
　　　　//创建better scroll对象;创建完毕之后;它里面传两个参数;一个是要管理的对象;一个是它里面的属性对象如果是要监听滚动位置就把这个参数传进去
      this.scroll = new BScroll(this.$refs.wrapper,{
        click:true, //如果是监听点击<div @click="">的话这个值必须设置为true
        probeType:this.probeType, //(这里分 0 1 2 3个级别0 1 表示不会监听到滚动;2 表示只监听手指滑动的区域;3表示监听所有)
        pullUpLoad:this.pullUpLoad //这个的值是 true或false 我在这里设置里一个变量;作用是动态设置
      });

　　　　//监听滚动条的位置
      this.scroll.on('scroll',(position)=>{
        // console.log(position)
　　　　将滚动位置信息事件传送出去
       　 this.$emit('scroll',position)
      });

      //监听上拉事件
      this.scroll.on('pullingUp',() =>{
     console.log('上拉加载更多')
　　　//BSscroll默认的上拉加载更多只会执行一次;如果想要加载更多就必须在网络请求发送完成并将内容挂载完毕之后;执行bscroll.finishPullUp()函数
　　//将上拉事件传送出去
        this.$emit('pullingUp')
      })
    }
  }
</script>

<style scoped>

</style>

betteer scroll里还有一些其他的方法: this.scroll.scrollTo(x,y,time) 这个表示回到某个位置 time表示滚动到某个位置的时间

注意:better scroll在用的时候必须要设定可滚动区域的高度 ;scroll在用的时候自己本身也会自动计算高度;它的计算是根据所加载的内容
       高度计算的;如果有图片,因为各个图片的加载速度不一样;所以他本身的计算会出现偏差;体现在滑动页面的时候会卡顿;所以我这
      时候就要监听图片是否加载完成;然后调用beeter scroll里的 refresh()函数刷新页面让scroll从新计算高度

另外要注意的是 better scroll  里面必须只有一个可滚动元素;也就是说他只能有一个直接子元素:例如:

<div class="waper">
    <ul>
       <li>精忠报国</li>
       <li>精忠报国</li>
       <li>精忠报国</li>
       <li>精忠报国</li>
       <li>精忠报国</li>
       <li>精忠报国</li>
       <li>精忠报国</li>
       <li>精忠报国</li>
       <li>精忠报国</li>
      <li>精忠报国</li>
    </ul>
</div>

　　另外better scroll 高度计算的方法有很多种 这里说一种

在css样式里设置这个:

.waper{

    height:calc(100% - 44px)

}