移動端頁面常見的一種效果:下拉刷新(pulldownrefresh)和上拉加載(pullupload),目的都是爲了加強用戶的體驗效果,所以各類移動端滑動插件也是層出不窮,今天小編也在這裏給你們推薦一個滑動插件:better-scroll
。javascript
GitHub地址:better-scroll前端
利用better-scroll也很輕易的實現上述效果。vue
項目是基於vue-cli腳手架建立的,因此先必須建立項目(步驟略)。java
better-scroll
插件下載:npm install better-scroll --save
git
項目中引入:import BScroll from 'better-scroll'
github
引入以後咱們能夠經過new BScroll()
獲得一個scroll對象實例,better-scroll的基本語法是:web
let wrapper = document.querySelector('.wrapper') let scroll = new BScroll(wrapper, {})
better-scroll之因此能夠滑動,其原理在於父級元素指定具體寬高,子元素寬高大於父級元素,便可實現滑動,以上兩點缺一不可。能夠看如下官方圖解:vue-cli
由於咱們在vue項目中使用,因此這裏還必須強調一點,初始化better-scroll獲得scroll對象時必須保證DOM結構渲染完畢,也就是說wrapper裏面的內容都渲染完畢以後才能初始化better-scroll,不然可能致使滑動失效。常見的咱們能夠把初始化BScroll放在this.$nextTick
回調函數種執行,由於在此時wrapper 的 DOM 已經渲染了,咱們能夠正確計算它以及它內層 content 的高度,以確保滾動正常。npm
這裏的 this.$nextTick
是一個異步函數,爲了確保 DOM 已經渲染,感興趣的同窗能夠了解一下它的內部實現細節,底層用到了MutationObserver
或者是 setTimeout(fn, 0)
。其實咱們在這裏把 this.$nextTick 替換成 setTimeout(fn, 20) 也是能夠的(20 ms 是一個經驗值,每個 Tick 約爲 17 ms),對用戶體驗而言都是無感知的。後端
pullUpLoad
和pullDownRefresh
屬性mounted () { ...發Ajax獲得數據... ... this.$nextTick(() => { this.myScroll = new BScroll(this.$refs.wrap, { scrollY: true, pullDownRefresh: { threshold: 50, probeType: 3 }, pullUpLoad: { threshold: 744 } }) }) }
pullDownRefresh
表示開啓下拉刷新,pullUpLoad
表示開啓上拉加載,默認值全爲false
,這裏具體用法能夠去看下better-scroll
的官網API。由於頁面大多數狀況下都是先從後端拿數據過來,而後再渲染DOM結構,因此我在vuemounted
鉤子裏面先發Ajax獲得數據後,再利用this.$nextTick()保證DOM渲染完畢後再初始化BScroll。
pullingUp
和pullingDown
事件pullingUp和pullingDown事件分別對應上拉加載和下拉刷新動做觸發事件,在其回調函數裏面能夠作一些其餘的操做,好比常見的從後臺獲取數據等。切記,必定要在回調的最後調用finishPullUp()
和finishPullDown()
方法來告訴BScroll一次上拉加載和下拉刷新動做結束,不然上拉加載和下拉刷新效果只會觸發一次,本人親自驗證!在拿到數據後,若是wrapper裏面的結構發生變化必定要調用refresh()
方法從新初始化BScroll,不然會致使滑動異常。
this.myScroll.on('pullingDown', () => { ...發送Ajax從後臺拿數據... ... this.$nextTick(() => { this.myScroll.refresh() // DOM 結構發生變化後,從新初始化BScroll }) this.myScroll.finishPullDown() // 下拉刷新動做完成後調用此方法告訴BScroll完成一次下拉動做 }) this.myScroll.on('pullingUp', () => { ...發送Ajax從後臺拿數據... ... this.$nextTick(() => { this.myScroll.refresh() // DOM 結構發生變化後,從新初始化BScroll }) this.myScroll.finishPullUp() // 上拉加載動做完成後調用此方法告訴BScroll完成一次上拉動做 })
本文最初摘自個人GitHub倉庫:web-study,若是你以爲本文對你前端的學習有幫助,但願給個star,我也會定時更新倉庫的內容,歡迎轉載,謝謝。倉庫地址:web-study
若是你有更好的移動端滑動插件推薦,歡迎留言,分享知識也是一種學習。