在做项目的时候，有使用到better-scroll来完成滚动，在这里记录一下对better-scroll的基本使用和一些使用心得。
安装
npm install better-scroll --save
引用
import BScroll from 'better-scroll'
使用
let scroll = new BScroll(DOM[,option1,...],...)
option有很多，可以在官方文档查看
https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options-advanced.html#scrollbar
浏览器滚动原理
浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。
那么对于 better-scroll 也是一样的道理，我们先来看一下 better-scroll 常见的 html 结构：（wrapper一定只能有一个子元素content，其他元素都要放进content里面）
<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
</div>
为了更加直观，我们再来看一张图：（图中wrpper应该是wrapper）
image
绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。
在Vue中封装一个独立组件，用于作为滚动组件：Scroll
Home.vue(一部分)
<template>
<div id="home">
<scroll class="content"
ref="scroll"
:pull-up-load="true"
v-on:pullingUp="getMove"
:probe-type="3"
v-on:scroll="getPosition"
>
<!--tis:top-back标签不能放到scroll标签内，不然的话等下就算你设置了position:fixed它也不会固定-->
<top-back v-on:click.native="backClick" v-show="isShowBackTop"></top-back>
<script>
import Scroll from "../../components/common/scroll/Scroll";
import TopBack from "../../components/content/topback/TopBack";
export default {
name: "Home",
components: {
Scroll,
},
data(){
//默认隐藏返回顶部图标
isShowBackTop: false,
},
created() {
},
mounted(){
},
methods: {
//上拉加载更多
getMove(){
this.getHomeGoods(this.currentType)
//(上拉加载默认只能执行一次，我们需要手动清除)
this.$refs.scroll.finishPullUp()
},
//判断滚动的位置
getPosition(position){
if (-position.y > this.tabControlOffsetTop) {
this.isShowBackTop = true
}else {
this.isShowBackTop = false
}
},
}
}
</script>
<style scoped>
#home{
/*padding-top: 44px;*/
position: relative;
height: 100vh;
.content{
/*height: calc(100% - 93px);*/
position: absolute;
top: 44px;
bottom: 49px;
left: 0;
right: 0;
overflow: hidden;
}
</style>
</template>
Scroll.vue
<template>
<div class="wrapper" ref="wrapper">
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: "Scroll",
data(){
return {
scroll : null,
}
},
props: {
pullUpLoad: {
type: Boolean,
default: false
},
probeType: {
type: Number,
default: 0
}
},
mounted() {
//1.创建BetterScroll对象，并传入DOM和选项（probetype,click,pullUpload）
this.scroll = new BScroll(this.$refs.wrapper,{
pullUpLoad: this.pullUpLoad,
click: true,
probeType: this.probeType
})
//监听scroll(滚动)事件，该事件会返回一个position
if (this.probeType ===2 || this.probeType === 3){
this.scroll.on('scroll',(position) => {
//发射自定义scroll事件给父组件，并发出position参数
this.$emit('scroll',position)
})
}
//监听pullingUp事件，监听到该事件完成上拉加载更多
//
if (this.pullUpLoad){
this.scroll.on('pullingUp',() => {
//发射自定义pullingUp事件给父组件
this.$emit('pullingUp')
})
}
},
methods: {
//封装滚动的方法
topBack(x,y,time=300){
this.scroll.scrollTo(x,y,time)
},
//封装完成刷新的方法
finishPullUp(){
this.scroll.finishPullUp()
},
////封装刷新的方法
refresh(){
this.scroll.refresh()
}
}
}
</script>
<style scoped>
</style>
返回顶部
除了上面的基本滚动之外，我还加了一个小功能：返回顶部。
BackTop.vue
<template>
<div class="top-back">
<img src="../../../assets/img/tab-bar-img/1.jpg" alt="">
</div>
</template>
<script>
export default {
name: "TopBack",
}
</script>
<style scoped>
.top-back{
position: fixed;
right: 10px;
bottom: 55px;
}
.top-back img{
width: 40px;
height: 40px;
border-radius: 50% 50%;
}
</style>
