BScroll初识

BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它是纯 JavaScript 实现，所以它是无依赖。

BetterScroll是一个开源项目，用在项目中避免自己手动写一个滚动页面。

BScroll怎么用

BScroll点击跳转

1. 安装

执行如下命令安装：

    npm install @better-scroll --save

2. 使用

在script中引入：

    import BScroll from 'better-scroll';

然后加载使用：

    let bs = new BScroll(wrapper, {})

BScroll实践

实例1：点击右侧数字导航跳转到相应的内容

实现

代码实现

<template>
<!-- wrapper外层 -->
  <div class="wrapper" ref="wrapper">
    <div>
      <!-- content滚动处 左侧详情内容  -->
      <div class="content" :ref="index" v-for="index in 10" :key="index">
        {{ index }}
      </div>
    </div>
    <!-- 右边导航列 -->
    <ul class="alphabet">
      <li v-for="index in 10" :key="index + '1'" @click="handleClick">
        {{ index }}
      </li>
    </ul>
  </div>
</template>

<script>
 //导入
 import BScroll from 'better-scroll';

export default {
  data(){
    return{
      nums:"",
    };
  },
  mounted() {
    this.init()
  },

  methods: {
    init(){
      this.scroll = new BScroll(this.$refs.wrapper,{
        //默认点击，所以要设置click：true
        click:true
      })
    },
    //获取点击的数字
    handleClick(e){
       this.nums = e.target.innerText;
       console.log(e.target.innerText + "被点击")
       //console.log("被点击")
    },
  },
  watch:{
    //监听letter变化，跳转到相应内容
    nums(){
      //调整到对应数字的div
      this.scroll.scrollToElement(this.$refs[this.nums][0]);
      //console.log(this.$refs[this.nums][0])
    },
  },
};



</script>

<style>
.wrapper {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: rgb(186, 209, 175);
}
.content {
  height: 200px;
  width: auto;
  font-size: 20px;
  background: rgb(228, 135, 178);
  border: 1px rgb(165, 9, 61) solid;
  align-items: center;
  line-height: 200px;
}
.alphabet {
  position: fixed;
  right: 0;
  top: 150px;
  bottom: 0;
  text-align: center;
  font-size: 30px;
  color: aliceblue;
  list-style-type:none;
}
</style>

最终效果

需注意的地方

最开始点击事件怎么都不执行，后面查阅文档发现BetterScroll默认会阻止浏览器的原生 click 事件,所以要在init初始化的时候设置：
```
init(){
  this.scroll = new BScroll(this.$refs.wrapper,{
    //默认点击，所以要设置click：true
    click:true
  })
}
```
提供API：scrollToElement(el, time, offsetX, offsetY, easing)滚动到指定的目标元素，上实例中传入一个DOM对象。传入的参数可以是DOM、string、number、boolean、Object(详见官网)

    nums(){
    //调整到对应数字的div
    this.scroll.scrollToElement(this.$refs[this.nums][0]);
    //打印传入的参数
    console.log(this.$refs[this.nums][0])
  },

如果点击4：

实例2：BScroll轮播图(官网demo)

BScroll提供了插件slide，扩展了轮播焦点图的能力。

1.插件安装

    npm install @better-scroll/slide --save

2.插件使用

首先引入插件，并通过静态方法BScroll.use()使用.

    //引入
    import Slide from '@better-scroll/slide'
    
    //使用
    BScroll.use(Slide)

3.插件布局

slide的布局由容器(slide-wrapper)、滚动元素(slide-content)、滚动的多个Page(slide-page)组成。

<div class="slide-wrapper">
  <div class="slide-content">
    <div class="slide-page"><div>
    <div class="slide-page"><div>
    <div class="slide-page"><div>
    <div class="slide-page"><div>
  <div/>
<div/>

4.实现

配置slide

    this.slide = new BScroll(this.$refs.slide,{
        //开启横向滚动，设置slide方向
        scrollX: true,
        //禁止纵向滚动
        scrollY: false,
        //开启slide功能
        slide: true,
        //关闭滚动动画，避免惯性动画带来的快速滑动一次滚动多页或闪烁问题
        momentum: false,
        //关闭回弹动画，避免循环衔接的闪烁
        bounce: false,
        //决定任何时候都派发scroll事件，实时获取slide的PageIndex
        probeType: 3
      })

代码实现

    <template>
<!-- 包装 -->
  <div class="slide-banner">
    <!-- 容器 -->
    <div class="banner-wrapper"> 
      <div class="slide-banner-wrapper" ref="slide">
        <div class="slide-banner-content">
                                                       <!-- 这里用到了动态绑定class -->
          <div v-for="num in nums" class="slide-page" :class="'page' + num" :key="num">page{{num}}</div>
        </div>
      </div>
      <div class="dots-wrapper">
        <span
        class="dot"
        v-for="num in nums"
        :key="num"
        :class="{'active': currentPageIndex === (num-1)}"></span>
      </div>
    </div>
    <div class="btn-wrap">
      <button class="next" @click="nextPage">nextPage</button>
      <button class="prev" @click="prePage">prePage</button>
    </div>
  </div>
</template>

<script>

import BScroll from '@better-scroll/core'
//引入插件
import Slide from '@better-scroll/slide'

BScroll.use(Slide)

export default {
  data(){
    return{
      nums:4,
      currentPageIndex:0
    };
  },
  mounted() {
    this.init()
  },

  methods: {
    init(){
      this.slide = new BScroll(this.$refs.slide,{
        //开启横向滚动
        scrollX: true,
        //禁止纵向滚动
        scrollY: false,
        slide: true,
        //关闭滚动动画
        momentum: false,
        //关闭回弹动画
        bounce: false,
        //决定任何时候都派发scroll事件
        probeType: 3
      })
      //滚动结束
      this.slide.on('scrollEnd',this._onScrollEnd)
      
      //切换page触发
      this.slide.on('slideWillChange',(page)=>{
        this.currentPageIndex = page.pageX
      })
      //切换page后触发
      this.slide.on('slidePageChanged',(page)=>{
        console.log('CurrentPage changed to =>',page)
      })
    },
      _onScrollEnd(){
        console.log('CurrentPage=>',this.slide.getCurrentPage())
      },
      nextPage(){
        this.slide.next()
      },
      prePage(){
        this.slide.prev()
      }
  },
  watch:{

  },
};



</script>

<style>
.slide-banner,
  .banner-wrapper{
    position:relative;
  }
.slide-banner-wrapper{
    min-height:1px;
    overflow:hidden;
}
.slide-banner-content{
    height:200px;
    white-space:nowrap;
    font-size:0;
}
.slide-page{
    display:inline-block;
    height:200px;
    width:100%;
    line-height:200px;
    text-align:center;
    font-size:26px;
}
.page1{
    background-color:#95B8D1;
}
.page2{
    background-color:#DDA789;
}

.page3{
    background-color:#C3D899;
}
.page4{
    background-color:#F2D4A7;
}

.dots-wrapper{
    position:absolute;
    bottom:4px;
    left:50%;
    transform:translateX(-50%);
}
.dot{
    display:inline-block;
    margin:0 4px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#eee;
}
.active{
    width:20px;
    border-radius:5px;
}
.btn-wrap{
    margin-top:20px;
    display :flex;
    justify-content :center;
}
 button{
    margin: 0 10px;
    padding: 10px;
    color: #fff;
    border-radius: 4px;
    background-color: #666;
 }
</style>

最终效果

5. 有关方法

实例方法

滚动到下一张 next([time], [easing])
滚动到上一张 prev([time], [easing])

>  [time]   : 动画时长

>  [easing] : 换的效果配置，默认`bounce`效果

2. getCurrentPage()获取当前页面，返回page

事件

slideWillChange 当slide的currentPage值改变时触发
slidePageChanged 当slide切换page之后触发

BScroll点击跳转/轮播图