-
介紹better-scroll
better-scroll 最常見的應(yīng)用場(chǎng)景是列表滾動(dòng)首繁，我們來看一下它的 html 結(jié)構(gòu)
<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
<!-- 這里可以放一些其它的 DOM，但不會(huì)影響滾動(dòng) -->
</div>
上面的代碼中 better-scroll 是作用在外層 wrapper 容器上的，滾動(dòng)的部分是 content 元素。這里要注意的是甚颂，better-scroll 只處理容器（wrapper）的第一個(gè)子元素（content）的滾動(dòng)刁品，其它的元素都會(huì)被忽略。
最簡(jiǎn)單的初始化代碼如下：
import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)
-
better-scroll在vue中的使用
安裝 npm install better-scroll --save
<template>
<div class="wrapper" ref="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
mounted() {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.wrapper, {})
})
}
}
</script>
Vue.js 提供了我們一個(gè)獲取 DOM 對(duì)象的接口—— vm.$refs勋桶。在這里，我們通過了 this.$refs.wrapper訪問到了這個(gè) DOM 對(duì)象侥猬，并且我們?cè)?mounted 這個(gè)鉤子函數(shù)里例驹，this.$nextTick 的回調(diào)函數(shù)中初始化 better-scroll 。因?yàn)檫@個(gè)時(shí)候退唠，wrapper 的 DOM 已經(jīng)渲染了鹃锈，我們可以正確計(jì)算它以及它內(nèi)層 content 的高度，以確保滾動(dòng)正常瞧预。
這里的 this.$nextTick 是一個(gè)異步函數(shù)屎债，為了確保 DOM 已經(jīng)渲染，感興趣的同學(xué)可以了解一下它的內(nèi)部實(shí)現(xiàn)細(xì)節(jié)垢油，底層用到了 MutationObserver 或者是 setTimeout(fn, 0)盆驹。其實(shí)我們?cè)谶@里把 this.$nextTick 替換成 setTimeout(fn, 20) 也是可以的（20 ms 是一個(gè)經(jīng)驗(yàn)值，每一個(gè) Tick 約為 17 ms）滩愁，對(duì)用戶體驗(yàn)而言都是無感知的躯喇。
-
better-scroll的事件
<template>
<div class="wrapper" ref="wrapper">
<ul class="content">
<li v-for="item in data">{{item}}</li>
</ul>
<div class="loading-wrapper"></div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
data() {
return {
data: []
}
},
created() {
this.loadData()
},
methods: {
loadData() {
requestData().then((res) => {
this.data = res.data.concat(this.data)
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.wrapper, {})
this.scroll.on('touchend', (pos) => {
// 下拉動(dòng)作
if (pos.y > 50) {
this.loadData()
}
})
} else {
this.scroll.refresh()
}
})
})
}
}
}
</script>
這段代碼比之前稍微復(fù)雜一些, 當(dāng)我們?cè)诨瑒?dòng)列表松開手指時(shí)候， better-scroll 會(huì)對(duì)外派發(fā)一個(gè) touchend 事件硝枉，我們監(jiān)聽了這個(gè)事件廉丽，并且判斷了 pos.y > 50（我們把這個(gè)行為定義成一次下拉的動(dòng)作）。如果是下拉的話我們會(huì)重新請(qǐng)求數(shù)據(jù)妻味，并且把新的數(shù)據(jù)和之前的 data 做一次 concat正压，也就更新了列表的數(shù)據(jù)，那么數(shù)據(jù)的改變就會(huì)映射到 DOM 的變化责球。需要注意的一點(diǎn)焦履，這里我們對(duì) this.scroll 做了判斷，如果沒有初始化過我們會(huì)通過 new BScroll 初始化棕诵，并且綁定一些事件裁良，否則我們會(huì)調(diào)用 this.scroll.refresh 方法重新計(jì)算，來確保滾動(dòng)效果的正常校套。
官網(wǎng)https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88
參考https://zhuanlan.zhihu.com/p/27407024
