全網最easy的better-scroll實現上拉加載和下拉刷新

前言

移動端頁面常見的一種效果:下拉刷新(pulldownrefresh)和上拉加載(pullupload),目的都是爲了加強用戶的體驗效果,所以各類移動端滑動插件也是層出不窮,今天小編也在這裏給你們推薦一個滑動插件:better-scrolljavascript

GitHub地址:better-scroll前端

利用better-scroll也很輕易的實現上述效果。vue

  1. vue建立項目

項目是基於vue-cli腳手架建立的,因此先必須建立項目(步驟略)。java

  1. 引入better-scroll插件

下載:npm install better-scroll --savegit

項目中引入: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),對用戶體驗而言都是無感知的。後端

  1. BScroll初始化時配置pullUpLoadpullDownRefresh屬性
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。

  1. 爲BScroll實例對象綁定pullingUppullingDown事件

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完成一次上拉動做
})
  1. 完成效果圖

後語

本文最初摘自個人GitHub倉庫:web-study,若是你以爲本文對你前端的學習有幫助,但願給個star,我也會定時更新倉庫的內容,歡迎轉載,謝謝。倉庫地址:web-study

若是你有更好的移動端滑動插件推薦,歡迎留言,分享知識也是一種學習。

相關文章
相關標籤/搜索