vue.js移動端app實戰4：上拉載入以及下拉重新整理
阿新 • • 發佈：2019-01-08
上拉載入以及下拉重新整理都是移動端很常見的功能，在搜尋或者一些分類列表頁面常常會用到。http://www.tuicool.com/articles/Vfmu6rR
跟橫向滾動一樣，我們還是採用better-scroll這個庫來實現。由於better已經更新了新的版本，之前是0.幾的版本，更新了一下發現，現在已經是1.2.6這個版本了，新版本多了些 比較好用的api，所以我也重寫了之前的程式碼，用新的api來實現上拉載入以及下拉重新整理。
首先把基本的樣式寫好，這裡就略過了，然後引入better-scroll庫
import BScroll from 'better-scroll'其次，在mounted生命週期例項化scroll,可以獲取完資料後再new，也可以先new後，獲取完資料呼叫refresh。
例項時需要傳入一個配置引數，由於引數比較多，具體的請參考文件，這裡只講2個重點的：
//是否開啟下拉重新整理，可傳入true或者false,如果需要更多配置可以傳入一個物件
pullDownRefresh：{
threshold:80,
stop:40
}
//是否開啟上拉載入，同上，上拉無stop引數，這裡需要注意是負數
pullUpLoad：{
threshold:-80,
}
/**
*
* @param threshold 觸發事件的閥值，即滑動多少距離觸發
* @param stop 下拉重新整理後回滾距離頂部的距離（為了給loading留出一點空間）
*/
以上的數字個人感覺比較合適，但是這裡有一個問題，由於我採用的是淘寶flexible.js來適配，這就導致：在安卓下80這個距離是合適的，但是到了iphone6s下，由於被縮放了3陪，所以現在80在iphone6s下就是27左右了。
所以，對於不同縮放程度的螢幕，還需要乘以對應的縮放比。
淘寶flexible.js裡面其實已經有這個獲取螢幕縮放比方法，這裡直接從裡面拿：//在util.js裡面加一個方法
export function getDeviceRatio(){
var isAndroid = window.navigator.appVersion.match(/android/gi import{ DEVICE_RATIO} from '../base/js/api.js'
/*獲取當前縮放比*/
const DEVICE_RATIO=getDeviceRatio();
/*下拉配置*/
const DOWN_CONFIG={
threshold:80*DEVICE_RATIO,
stop:40*DEVICE_RATIO
}
/*上拉配置*/
const UP_CONFIG={
threshold:-80*DEVICE_RATIO,
}
this.scroller = new BScroll(scrollWrap,{
click:true,
probeType:3,
pullDownRefresh:DOWN_CONFIG,
pullUpLoad:UP_CONFIG
});例項化後，接下來就是監聽上拉和下拉事件了。betterScroll新增了一些事件，主要的有：
/*下拉事件*/
this.scroller.on('pullingDown',()=> {});
/*上拉事件*/
this.scroller.on('pullingUp',()=>{});
觸發上拉或者下拉事件後，需要我們呼叫 this.scroller.finishPullDown() 或者 this.scroller.finishPullUp() 來通知better-scroll事件完成。
大致的流程是這樣的：
this.scroller.on('pullingDown',()=> {
<!-- 1. 傳送請求獲取資料 -->
<!-- 2. 獲取成功後，通知事件完成 -->
<!-- 3. 修改data資料，在nextTick呼叫refresh -->
});
通常操作完成後都需要我們手動觸發refresh方法來重新計算可滾動的距離，因此可以寫一個watch監聽資料的變化，這樣我們只需要改變資料，不用每次操作資料後都呼叫refresh方法。
watch:{
dataList(){
this.$nextTick(()=>{
this.scroller.refresh();
})
}
},
如果你使用的版本還是舊的，那可以在on( scroll )事件的時候進行判斷來實現功能
this.scroller.on("scroll",(pos)=>{
//獲取整個滾動列表的高度
var height=getStyle(scroller,"height");
//獲取滾動外層wrap的高度
var pageHeight=getStyle(scrollWrap,"height");
//觸發事件需要的閥值
var distance=80*DEVICE_RATIO;
//引數pos為當前位置
if(pos.y>distance){
//console.log("下拉");
//do something
}else if(pos.y-pageHeight<-height-distance){
//console.log("上拉");
//do something
}
為了防止多次觸發，需要加2個開關類的東西;
var onPullUp=true;
var onPullDown=true;
每次觸發事件時，將對應的 開關 設定為false, 等操作完成後，再重新設定為true,否則多次下拉或者上拉就會觸發多次事件。通過設定開關可以保證每次只有一個事件在進行。
最後，來封裝成一個元件
<template>
<div ref="wrapper" class="list-wrapper">
<div class="scroll-content">
<slot></slot>
</div>
</div>
</template>
由於每個頁面需要滾動的具體內容都是不一樣的，所以用了一個插槽來分發。
元件需要的引數由父級傳入，通過prop來接收並設定預設值
export default {
props: {
dataList:{
type: Array,
default: []
},
probeType: {
type: Number,
default: 3
},
click: {
type: Boolean,
default: true
},
pullDownRefresh: {
type: null,
default: false
},
pullUpLoad: {
type: null,
default: false
},
}
元件掛載後，在事件觸發時並不直接處理事件，而是向父級傳送一個事件，父級通過在模板v-on接收事件並處理後續的邏輯
mounted() {
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click,
pullDownRefresh: this.pullDownRefresh,
pullUpLoad: this.pullUpLoad,
})
this.scroll.on('pullingUp',()=> {
if(this.continuePullUp){
this.beforePullUp();
this.$emit("onPullUp","當前狀態：上拉載入");
}
});
this.scroll.on('pullingDown',()=> {
this.beforePullDown();
this.$emit("onPullDown","當前狀態：下拉載入更多");
});
}
父元件在使用時，需要傳入配置引數Props以及處理子元件發射的事件，並且用具體的內容並替換掉 slot 標籤
<Scroller
id="scroll"
ref="scroll"
:dataList="filmList"
:pullDownRefresh="DOWN_CONFIG"
:pullUpLoad="UP_CONFIG"
@onPullUp="pullUpHandle"
@onPullDown="pullDownHandle"
>
<ul>
<router-link class="film-list" v-for="(v,i) in filmList" :key="v.id" tag="li" :to='{path:"/film-detail/"+v.id}'>
<div class="film-list__img">
<img v-lazy="v.images.small" alt="" />
</div>
<div class="film-list__detail">
<p class="film-list__detail__title">{{v.title}}</p>
<p class="film-list__detail__director">導演：{{filterDirectors(v.directors)}}</p>
<p class="film-list__detail__year">年份：{{v.year}}<span>{{v.stock}}</span></p>
<p class="film-list__detail__type">類別：{{v.genres.join(" / ")}}<span></span></p>
<p class="film-list__detail__rank">評分：<span>{{v.rating.average}}分</span></p>
</div>
</router-link>
</ul>
</Scroller>
父元件可以通過this.$refs.xxx來獲取到子元件，可以呼叫子元件裡面的方法；
computed:{
scrollElement(){
return this.$refs.scroll
}
}
完整的scroller元件內容如下
<template>
<div ref="wrapper" class="list-wrapper">
<div class="scroll-content">
<slot></slot>
<div>
<PullingWord v-show="!inPullUp&&dataList.length>0" :loadingWord="beforePullUpWord"></PullingWord>
<Loading v-show="inPullUp" :loadingWord='PullingUpWord'></Loading>
</div>
</div>
<transition name="pullDown">
<Loading class="pullDown" v-show="inPullDown" :loadingWord='PullingDownWord'></Loading>
</transition>
</div>
</template>
<script >
import BScroll from 'better-scroll'
import Loading from './loading.vue'
import PullingWord from './pulling-word'
const PullingUpWord="正在拼命載入中...";
const beforePullUpWord="上拉載入更多";
const finishPullUpWord="載入完成";
const PullingDownWord="載入中...";
export default {
props: {
dataList:{
type: Array,
default: []
},
probeType: {
type: Number,
default: 3
},
click: {
type: Boolean,
default: true
},
pullDownRefresh: {
type: null,
default: false
},
pullUpLoad: {
type: null,
default: false
},
},
data() {
return {
scroll:null,
inPullUp:false,
inPullDown:false,
beforePullUpWord,
PullingUpWord,
PullingDownWord,
continuePullUp:true
}
},
mounted() {
setTimeout(()=>{
this.initScroll();
this.scroll.on('pullingUp',()=> {
if(this.continuePullUp){
this.beforePullUp();
this.$emit("onPullUp","當前狀態：上拉載入");
}
});
this.scroll.on('pullingDown',()=> {
this.beforePullDown();
this.$emit("onPullDown","當前狀態：下拉載入更多");
});
},20)
},
methods: {
initScroll() {
if (!this.$refs.wrapper) {
return
}
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click,
pullDownRefresh: this.pullDownRefresh,
pullUpLoad: this.pullUpLoad,
})
},
beforePullUp(){
this.PullingUpWord=PullingUpWord;
this.inPullUp=true;
},
beforePullDown(){
this.disable();
this.inPullDown=true;
},
finish(type){
this["finish"+type]();
this.enable();
this["in"+type]=false;
},
disable() {
this.scroll && this.scroll.disable()
},
enable() {
this.scroll && this.scroll.enable()
},
refresh() {
this.scroll && this.scroll.refresh()
},
finishPullDown(){
this.scroll&&this.scroll.finishPullDown()
},
finishPullUp(){
this.scroll&&this.scroll.finishPullUp()
},
},
watch: {
dataList() {
this.$nextTick(()=>{
this.refresh();
})
}
},
components: {
Loading,
PullingWord
}
}
</script>