vue-better-scroll 一個vue的上拉加載下拉刷新插件

vue-better-scroll

A vue plugins based on better-scroll

最近寫移動端項目，下拉刷新、上拉加載的場景很常見，發現 mint-ui 的 Loadmore 組件效果體驗不盡如人意， Vux 的 Scroller 組件做者不推薦使用也中止維護了，最後決定根據better-scroll封裝成本身的vue組件，做者也提供了詳細的教程。

Example

Demo Page

滾動原理

因爲 better-scroll 的滾動原理爲：在滾動方向上，第一個子元素的長度超過了容器的長度。

那麼對於 Scroll 組件，其實就是內容元素 .list-content 在滾動方向上的長度必須大於容器元素 .wrapper。

任什麼時候候若是出現沒法滾動的狀況，都應該首先查看內容元素 .list-content 的元素高度/寬度是否大於容器元素 .wrapper 的高度/寬度。這是內容可以滾動的前提條件。若是內容存在圖片的狀況，可能會出現 DOM 元素渲染時圖片還未下載，所以內容元素的高度小於預期，出現滾動不正常的狀況。此時你應該在圖片加載完成後，好比 onload 事件回調中，手動調用 vue-better-scroll 組件的 refresh() 方法，它會從新計算滾動距離。

Use Setup

Install vue2-better-scroll

yarn add vue2-better-scroll
// or
npm install vue2-better-scroll -s
複製代碼

Vue mount

// import
import Vue from 'vue'
import VueBetterScroll from 'vue2-better-scroll'

// or require
var Vue = require('vue')
var VueBetterScroll = require('vue2-better-scroll')

// mount with global
Vue.use(VueBetterScroll)

// mount with component(can't work in Nuxt.js/SSR)
import { VueBetterScroll } from 'vue2-better-scroll'

export default {
  components: {
    VueBetterScroll
  }
}


// 或者直接導入js文件
<script src="./dist/vue-better-scroll.js"></script>

複製代碼

Use in SPA

<template>
  <div id="app">
    <header>vue-better-scroll demo</header>
    <main class="position-box">  <!-- 須要一個建立一個父容器 組件高度默認等於父容器的高度 -->
      <vue-better-scroll class="wrapper" ref="scroll" :scrollbar="scrollbarObj" :pullDownRefresh="pullDownRefreshObj" :pullUpLoad="pullUpLoadObj" :startY="parseInt(startY)" @pulling-down="onPullingDown" @pullin-up="onPullingUp">
        <ul class="list-content">
          <li class="list-item" v-for="item in items">{{item}}</li>
        </ul>
      </vue-better-scroll>
    </main>
    <button class="go-top" @click="scrollTo">返回頂部</button>
  </div>
</template>

<script> import VueBetterScroll from '../dist/vue-better-scroll' // import VueBetterScroll from './lib' let count = 1 export default { name: 'app', components: { VueBetterScroll }, data() { return { // 這個配置能夠開啓滾動條，默認爲 false。當設置爲 true 或者是一個 Object 的時候，都會開啓滾動條，默認是會 fade 的 scrollbarObj: { fade: true }, // 這個配置用於作下拉刷新功能，默認爲 false。當設置爲 true 或者是一個 Object 的時候，能夠開啓下拉刷新，能夠配置頂部下拉的距離（threshold） 來決定刷新時機以及回彈停留的距離（stop） pullDownRefreshObj: { threshold: 90, stop: 40 }, // 這個配置用於作上拉加載功能，默認爲 false。當設置爲 true 或者是一個 Object 的時候，能夠開啓上拉加載，能夠配置離底部距離閾值（threshold）來決定開始加載的時機 pullUpLoadObj: { threshold: 0, txt: { more: '加載更多', noMore: '沒有更多數據了' } }, startY: 0, // 縱軸方向初始化位置 scrollToX: 0, scrollToY: 0, scrollToTime: 700, items: [] } }, mounted() { this.onPullingDown() }, methods: { // 滾動到頁面頂部 scrollTo() { this.$refs.scroll.scrollTo(this.scrollToX, this.scrollToY, this.scrollToTime) }, // 模擬數據請求 getData() { return new Promise(resolve => { setTimeout(() => { const arr = [] for (let i = 0; i < 10; i++) { arr.push(count++) } resolve(arr) }, 1000) }) }, onPullingDown() { // 模擬下拉刷新 console.log('下拉刷新') count = 0 this.getData().then(res => { this.items = res this.$refs.scroll.forceUpdate(true) }) }, onPullingUp() { // 模擬上拉 加載更多數據 console.log('上拉加載') this.getData().then(res => { this.items = this.items.concat(res) if (count < 30) { this.$refs.scroll.forceUpdate(true) } else { this.$refs.scroll.forceUpdate(false) } }) } } } </script>

<style> .position-box { position: fixed; top: 40px; left: 0; right: 0; bottom: 0; } </style>

複製代碼

Attributes:

參數	說明	類型	可選值	默認值
probeType	派發scroll事件的條件	Number	一、二、3	1
click	better-scroll 會派發一個 click 事件	Boolean		true
listenScroll	是否監聽滾動，開啓後才能派發scroll事件	Boolean		false
listenBeforeScroll	是否監聽滾動以前，開啓後才能派發before-scroll-start事件	Boolean		false
scrollbar	這個配置能夠開啓滾動條。當設置爲 true 或者是一個 Object 的時候，都會開啓滾動條，默認是會 fade 的	Boolean or Object	{fade: true},	false
pullDownRefresh	這個配置用於作下拉刷新功能。當設置爲 true 或者是一個 Object 的時候，能夠開啓下拉刷新，能夠配置頂部下拉的距離（threshold） 來決定刷新時機以及回彈停留的距離（stop）	Boolean or Object	{threshold: 90,stop: 40},	false
pullUpLoad	這個配置用於作上拉加載功能。當設置爲 true 或者是一個 Object 的時候，能夠開啓上拉加載，能夠配置離底部距離閾值（threshold）來決定開始加載的時機	Boolean or Object	{ threshold: 0, txt: { more: '加載更多',noMore:'沒有更多數據了'} }	false
startY	縱軸方向初始化位置	Number		0
freeScroll	有些場景咱們須要支持橫向和縱向同時滾動，而不只限制在某個方向，這個時候咱們只要設置 freeScroll 爲 true 便可	Boolean		false
options	可自行根據 better-scroll 官方文檔 擴展參數 例：:options="{stopPropagation:true}"	Object	官方文檔的全部參數（注：props傳入的相同的屬性會覆蓋options傳入的）	{}

Slots:

name	說明
default	滾動的主體內容區域
pulldown	下拉刷新的內容
pullup	上拉加載的內容

Methods:

方法名	說明	參數
initScroll	初始化scroll組件
disable	禁用 better-scroll，DOM 事件（如 touchstart、touchmove、touchend）的回調函數再也不響應
enable	啓用 better-scroll, 默認 開啓
refresh	從新計算 better-scroll，當 DOM 結構發生變化的時候務必要調用確保滾動的效果正常（當頁面沒法滾動時，可嘗試調用此方法）
scrollTo	滾動到指定的位置	(scrollToX, scrollToY, scrollToTime, easing)接收4個參數，1.x橫軸座標(px) 2.y 縱軸座標(px) 3.滾動動畫執行的時長(ms) 4.easing 緩動函數，通常不建議修改
scrollToElement	滾動到指定的目標元素	(el, time, offsetX , offsetY )接收4個參數 詳情請查看: scrollToElement
destroy	銷燬 better-scroll，解綁事件
forceUpdate	數據跟新後強制更新頁面	(dirty)接收1個 boolean 類型的參數，若是參數爲true，說明還能夠觸發下拉或者上拉事件，若參數爲false表示以後不可拉動，通常用於數據加載所有了

Events:

事件名稱	說明	回調參數
scroll	觸發時機：滾動過程當中，具體時機取決於選項中的 probeType (觸發事件在參數中須要開啓 listenScroll )	共1個參數,類型Object, {x, y} 滾動的實時座標
before-scroll-start	觸發時機：滾動開始以前 (觸發事件在參數中須要開啓 listenBeforeScroll )	無
pulling-down	觸發時機：在一次下拉刷新的動做後，這個時機通常用來去後端請求數據。(觸發事件在參數中須要開啓 pullDownRefresh 相關配置 )	無
pullin-up	觸發時機：在一次上拉加載的動做後，這個時機通常用來去後端請求數據。(觸發事件在參數中須要開啓 pullingUp 相關配置 )	無

---

目前只提供了以上經常使用方法、Api,若有額外須要請 issue

More detailed settings, please visit

better-scroll document

Author Blog

Gold_Gold