better-scroll的用法

1.better-scroll 的滚动原理

      父容器固定高度，并设置属性 overflow:hidden，使得子元素高度超出容器后能被隐藏。

2.使用better-scroll的基本条件

     必须包含两个大的div，外层和内层div

     外层div设置可视的大小(宽或者高)-有限制宽或高

     内层div，包裹整个可以滚动的部分

     内层div高度一定大于外层div的宽或高，才能滚动

3.加载better-scroll

      首先在package.json里面加入better-scroll的依赖，然后使用npm安装  

npm install better-scroll --save-dev

4.引入better-scroll

import BScroll from 'better-scroll'

 

 5.用法

      竖向滚动

      html 结构

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

      css

.wrapper{

             display: fixed; 

             left: 0; 

             top: 0;

             bottom: 0;

            width: 100%; 

            overflow:hidden;

       }

      js

 this.contentScroll = new BScroll(this.$refs.content, {

        click:true

    }

     横向滚动

扫描二维码关注公众号，回复： 2528708 查看本文章

       html 结构

<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();
}   

    轮播图

       html 结构

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

       js

//初始化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
})