在做項(xiàng)目的時(shí)候，有使用到better-scroll來(lái)完成滾動(dòng)，在這里記錄一下對(duì)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
瀏覽器滾動(dòng)原理
瀏覽器的滾動(dòng)條大家都會(huì)遇到，當(dāng)頁(yè)面內(nèi)容的高度超過(guò)視口高度的時(shí)候，會(huì)出現(xiàn)縱向滾動(dòng)條；當(dāng)頁(yè)面內(nèi)容的寬度超過(guò)視口寬度的時(shí)候，會(huì)出現(xiàn)橫向滾動(dòng)條。也就是當(dāng)我們的視口展示不下內(nèi)容的時(shí)候，會(huì)通過(guò)滾動(dòng)條的方式讓用戶滾動(dòng)屏幕看到剩余的內(nèi)容。
那么對(duì)于 better-scroll 也是一樣的道理，我們先來(lái)看一下 better-scroll 常見(jiàn)的 html 結(jié)構(gòu)：（wrapper一定只能有一個(gè)子元素content，其他元素都要放進(jìn)content里面）
<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
</div>
為了更加直觀，我們?cè)賮?lái)看一張圖：（圖中wrpper應(yīng)該是wrapper）
綠色部分為 wrapper，也就是父容器，它會(huì)有固定的高度。黃色部分為 content，它是父容器的第一個(gè)子元素，它的高度會(huì)隨著內(nèi)容的大小而撐高。那么，當(dāng) content 的高度不超過(guò)父容器的高度，是不能滾動(dòng)的，而它一旦超過(guò)了父容器的高度，我們就可以滾動(dòng)內(nèi)容區(qū)了，這就是 better-scroll 的滾動(dòng)原理。
在Vue中封裝一個(gè)獨(dú)立組件，用于作為滾動(dòng)組件：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標(biāo)簽不能放到scroll標(biāo)簽內(nèi)，不然的話等下就算你設(shè)置了position:fixed它也不會(huì)固定-->
<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(){
//默認(rèn)隱藏返回頂部圖標(biāo)
isShowBackTop: false,
},
created() {
},
mounted(){
},
methods: {
//上拉加載更多
getMove(){
this.getHomeGoods(this.currentType)
//(上拉加載默認(rèn)只能執(zhí)行一次，我們需要手動(dòng)清除)
this.$refs.scroll.finishPullUp()
},
//判斷滾動(dòng)的位置
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.創(chuàng)建BetterScroll對(duì)象，并傳入DOM和選項(xiàng)（probetype,click,pullUpload）
this.scroll = new BScroll(this.$refs.wrapper,{
pullUpLoad: this.pullUpLoad,
click: true,
probeType: this.probeType
})
//監(jiān)聽(tīng)scroll(滾動(dòng))事件，該事件會(huì)返回一個(gè)position
if (this.probeType ===2 || this.probeType === 3){
this.scroll.on('scroll',(position) => {
//發(fā)射自定義scroll事件給父組件，并發(fā)出position參數(shù)
this.$emit('scroll',position)
})
}
//監(jiān)聽(tīng)pullingUp事件，監(jiān)聽(tīng)到該事件完成上拉加載更多
//
if (this.pullUpLoad){
this.scroll.on('pullingUp',() => {
//發(fā)射自定義pullingUp事件給父組件
this.$emit('pullingUp')
})
}
},
methods: {
//封裝滾動(dòng)的方法
topBack(x,y,time=300){
this.scroll.scrollTo(x,y,time)
},
//封裝完成刷新的方法
finishPullUp(){
this.scroll.finishPullUp()
},
////封裝刷新的方法
refresh(){
this.scroll.refresh()
}
}
}
</script>
<style scoped>
</style>
返回頂部
除了上面的基本滾動(dòng)之外，我還加了一個(gè)小功能：返回頂部。
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>
