vue移动端项目中会用到的better-scroll基本使用

GitHub：https://github.com/ustbhuangyi/better-scroll/tree/v2.0.0-beta.6
官方文档：https://better-scroll.github.io/docs/zh-CN/
我们在pc端显示的效果也是可以滑动的但是到了移动端就可能出现卡顿状态，better-scroll能够让页面的滑动更加流畅

1.安装

• 在vue我们直接下载并引入就可以了（详见官方文档）
• 如果不是在vue中，我们在vue中npm install一下，就会在node_module下找到对应文件夹，在下图这个位置就可以找到js文件 我们在html文件中引入就可以了
  

2.使用

下面我们从案例操作对better-scroll进行讲解

案例一，局部滚动

我们正常可以通过CSS的overflow-y属性进行修改

<template>
  <div>
    <p>为了让滚动更加顺滑,用better-scroll这个插件</p>
    <ul class="content">
      <li>分类列表1</li>
      <li>分类列表2</li>
      <li>分类列表3</li>
      ...
      <li>分类列表999</li>
      <li>分类列表1000</li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: "XXXX.vue"
    }
</script>

<style scoped>
.content{
  height: 150px;
  background-color: antiquewhite;

  overflow: hidden;
  overflow-y: scroll;
}
</style>

用better-scroll方法操作如下（vue中已经安装）

<template>
  <div class="wrapper">
    <ul>
      <li>分类列表1</li>
      <li>分类列表2</li>
   		...
      <li>分类列表999</li>
      <li>分类列表1000</li>
    </ul>
  </div>
</template>

<script>
//引入
    import BScroll from '@better-scroll/core'
    export default {
        name: "XXXXX.vue",
        data (){
            return{
               scroll:null
            }
        },
        //注意这里用的生命周期是mounted，created是在组件创建完成之后调用的，这时候还没有挂载模板所以找不到wrapper
       mounted() {
            // new BScroll(document.querySelector('.content'))直接查找标签
           this.scroll = new BScroll(document.querySelector('.wrapper'),{})
        }
    }
</script>

<style scoped>
.wrapper{
  height: 150px;
  background-color: antiquewhite;
  overflow: hidden;
}
</style>

案例二，‘上拉加载更多’

bscroll.js
链接：https://pan.baidu.com/s/1F9SH-fO_eDP1itBaCag_yQ
提取码：tpx8
vue中可以再下载一个pull-up插件，
不在vue中直接用上面的1.几版本的bscroll.js吧，上面我引用那个cord.js也会报错说pullingUp事件不存在，引pull-up.js也不能解决问题。bscroll.js不会报错

//展示上拉加载更多
    bscroll.on('pullingUp', () => {
        console.log('上拉加载更多');
        // 发送网络请求，请求更多页的数据
        // 等数据请求完成，并且将新的数据展示出来后
        bscroll.finishPullUp()
    })

案例三，监听滚动位置

这个非vue直接引入code.js可以实现

// 默认情况下BScroll是不可以实时的监听滚动位置的
// probe侦测
// 0,1，都是不侦测实时的位置
// 2：在手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测
// 3：只要是滚动都侦测
//实现滚动
    const bscroll = new BScroll(document.querySelector('.wrapper'),{
        probeType:3,
        // click:true,
        pullUpLoad: true
    })
    bscroll.on('scroll',(position) => {
         console.log(position)
        // position实时记录监听到哪了
    })

3.具体在vue中怎么用

因为每个页面会调用scroll,我们直接导入包的话，每个页面都要单独导入，万一有一天better-scroll的作者不再维护了，我们还要每个页面都去换一下，很麻烦，我们直接就进行封装，到时候直接修改封装的这个组件中的导入就好了

(1)滚动监听

每个页面的要求不同，这两个属性的数据我们就去父组件中确定

监听滚动的位置，每个页面对滚动位置产生的事件也不一样，我们就要到对应的页面去设置，可以根据这个滚动位置设置‘返回顶部按钮’等功能

（2）上拉事件

参考代码结构（非完整代码）
scroll.vue

<template>
  //用ref锁定这个wrapper,我们下面就用this.$refs.wrapper
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
    import BScroll from '@better-scroll/core'
    import Pullup from '@better-scroll/pull-up'

    BScroll.use(Pullup)

    export default {
        name: "Scroll",
        props:{
            probeType: {
                type: Number,
                default: 0
            },
            pullUpLoad: {
                type: Boolean,
                default: false
            }
        },
        data(){
            return {
                scroll: null
            }
        },
        methods:{
            scrollTo(x, y, time =300) {
                this.scroll.scrollTo(x, y, time)
            },
            finishPullUp() {
                this.scroll.finishPullUp()
            }
        },
        mounted() {
          //document.querySelector('.wrapper')不等确保拿到的是我们想要的那个wrapper
            this.scroll = new BScroll(this.$refs.wrapper, {
                click: true,//控制div是否可以点击
                //每个页面的要求不同，这两个属性的数据我们就去父组件中确定
                probeType: this.probeType,
                pullUpLoad: this.pullUpLoad
            })
            
            //监听滚动的位置
            this.scroll.on('scroll',(position) =>{
                this.$emit('scroll', position)
                this.scroll.refresh()
            })
            
            // 监听上拉事件
            this.scroll.on('pullingUp', () =>{
                // console.log('事件触发')
                this.$emit('pullingUp')
            })
            console.log(this.scroll)
        },
        updated(){
            
        },

    }
</script>

<style scoped>
</style>

在页面中应用

<template>
  <div id="home">
    <scroll class="content"
            ref="scroll"
            :probe-type="3"
            @scroll="contentScroll"
            :pull-up-load="true"
            @pullingUp="loadMore">
		//...页面滚动内容
    </scroll>
  </div>
</template>

<script>
    import Scroll from "components/common/scroll/Scroll";
    import {getHomeGoods} from "network/home";

    export default {
        name: "Home",
        components: {
            Scroll,
        },
        data(){
            return{
            ...
            }
        },
        created() {
            this.getHomeGoods()
        },
        methods:{
            contentScroll(position) {
                this.isShowBackTop = (-position.y) > 1000
            },
            loadMore() {
                this.getHomeGoods(this.currentType)
            },
            getHomeGoods(type){
                getHomeGoods(type,page).then(res =>{
                   //...
                    this.$refs.scroll.finishPullUp()
                })
            }
        }
    }
</script>

<style scoped>
  #home{
    height: 100vh;
    position: relative;
  }
  .content{
     overflow: hidden;
     position: absolute;
     top: 44px;
     bottom: 44px;
     left: 0;
     right: 0;
  }
</style>

4.页面不可滚动bug

方法一：把代码放到updated生命周期中

updated(){
  this.scroll = new BScroll(this.$refs.wrapper, {
                click: true,//控制div是否可以点击
                probeType: this.probeType,
                pullUpLoad: this.pullUpLoad
            })
          // 监听滚动的位置
            this.scroll.on('scroll',(position) =>{
                this.$emit('scroll', position)
            })
            // 监听上拉事件
            this.scroll.on('pullingUp', () =>{
                // console.log('事件触发')
                this.$emit('pullingUp')
            })
            console.log(this.scroll)
        },
}

方法二：加一个refresh（）

还在mounted生命周期中，在监听滚动位置事件中加一个refresh（）
详见官方文档：https://better-scroll.github.io/docs/zh-CN/FAQ/

this.scroll.on('scroll',(position) =>{
                this.$emit('scroll', position)
                this.scroll.refresh()
           })