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）的滾動，其它的元素都會被忽略。123

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)123

橫向滾動

場景：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
})