better-scroll的基本使用

better-scroll是借鉴iscroll，是很牛的前端大神ustbhuangyi黄轶老师上传至github，并在教学视频中屡次运用的
github地址：https://github.com/ustbhuangyi/better-scroll
中文文档：Document
其方法、事件、属性等都可以去文档查找，做移动端的滑动非常好

1、使用better-scroll的基本条件

• 必须包含两个大的div，外层和内层div
• 外层div设置可视的大小(宽或者高)-有限制宽或高
• 内层div，包裹整个可以滚动的部分
• 内层div高度一定大于外层div的宽或高，才能滚动

### 2、基本使用

new BScroll(Dom元素)
//其中DOM元素就是外层的div，
//这里要注意的是，better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。

3、小案例

竖向滚动

better-scroll 最常见的应用场景是列表滚动，我们来看一下它的 html 结构

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
</div>

css

/*对外层div进行了高度上的限制*/
.wrapper{
    display: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    overflow:hidden;
}

上面的代码中 better-scroll 是作用在外层 wrapper 容器上的，滚动的部分是 content 元素。

import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)

横向滚动

场景：vue

<div class="pic-wrapper" ref='picWrapper'>
    <ul class="pic-list" ref='picList'>
        <li class="pic-item" v-for="pic in seller.pics"> 
            <img :src="pic"/>
        </li>
    </ul>
</div>

css

.pic-wrapper{
    padding-bottom: 18px;
    width: 100%;
    overflow: hidden;
    .pic-list{
        font-size: 0;
        white-space: nowrap;
        .pic-item{
            display: inline-block;
            margin-right: 6px;
            width: 120px;
            height: 90px;
            &:last-child{
                margin-right: 0;
            }
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}

js

if(!this.picScroll){
    this.picScroll = new Bscroll(this.$refs.picWrapper,{
        scrollX: true,
        eventPassthrough: 'vertical'
    })
}else{
    this.picScroll.refresh();
}   

轮播图

<div class="slider" ref="slider">
  <div class="slider-group" ref="sliderGroup">
    <div v-for="item in slider">
        <a :href="item.linkUrl">
            <img :src="item.picUrl"/>
        </a>
    </div>
  </div>
</div>

//初始化slider轮播
this.slider = new Bscroll(this.$refs.slider,{
    scrollX: true,
    scrollY: false,
    momentum: false,
    snap: {
        loop: this.loop,
        threshold: 0.3,
        speed: 400
    },
    bounce: false,
    stopPropagation: true,
    click: true
})