這次帶給大家vue.js行動端實作上拉載入下拉刷新，vue.js行動端實作上拉載入下拉刷新的注意事項有哪些，下面就是實戰案例，一起來看一下。
# 跟橫向捲動一樣，我們還是採用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);
var isIPhone = window.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = window.devicePixelRatio;
var dpr;
if (isIPhone) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3) {
dpr = 3;
} else if (devicePixelRatio >= 2){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下，仍旧使用1倍的方案
dpr = 1;
}
return dpr
}
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<p style="text-align: left;">
為了防止多次觸發，需要加2個開關類別的東西;</p><pre class="brush:php;toolbar:false">var onPullUp=true;
var onPullDown=true;每次觸發事件時，將對應的開關設為false, 等操作完成後，再重新設定為true,否則多次下拉或上拉就會觸發多次事件。透過設定開關可以保證每次只有一個事件在進行。
最後，來封裝成一個元件
<template> <p> </p> <p> <slot></slot> </p> </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>
<ul>
<router-link>
<p>
<img alt="vue.js行動端實作上拉載入下拉刷新" >
</p>
<p>
</p>
<p>{{v.title}}</p>
<p>导演：{{filterDirectors(v.directors)}}</p>
<p>年份：{{v.year}}<span>{{v.stock}}</span></p>
<p>类别：{{v.genres.join(" / ")}}<span></span></p>
<p>评分：<span>{{v.rating.average}}分</span></p>
</router-link>
</ul>
</scroller>父元件可以透過this.$refs.xxx來取得子元件，可以呼叫子元件裡面的方法；
computed:{
scrollElement(){
return this.$refs.scroll
}
}完整的scroller元件內容如下
<template>
<p>
</p>
<p>
<slot></slot>
</p>
<p>
<pullingword>0" :loadingWord="beforePullUpWord"></pullingword>
<loading></loading>
</p>
<transition>
<loading></loading>
</transition>
</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>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是vue.js行動端實作上拉載入下拉刷新的詳細內容。更多資訊請關注PHP中文網其他相關文章！
es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。
JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。
原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！
JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。
javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。
JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。
foreach是es6里的吗May 05, 2022 pm 05:59 PMforeach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。
整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
Dreamweaver CS6
視覺化網頁開發工具
記事本++7.3.1
好用且免費的程式碼編輯器
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
