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
}
横向滚动
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
})