vue.js移動端app之上拉加載以及下拉刷新實戰(zhàn)
上拉加載以及下拉刷新都是移動端很常見的功能,在搜索或者一些分類列表頁面常常會用到。
跟橫向滾動一樣,我們還是采用better-scroll這個庫來實現(xiàn)。由于better已經(jīng)更新了新的版本,之前是0.幾的版本,更新了一下發(fā)現(xiàn),現(xiàn)在已經(jīng)是1.2.6這個版本了,新版本多了些 比較好用的api,所以我也重寫了之前的代碼,用新的api來實現(xiàn)上拉加載以及下拉刷新。
首先把基本的樣式寫好,這里就略過了,然后引入better-scroll庫
import BScroll from 'better-scroll'
其次,在mounted生命周期實例化scroll,可以獲取完數(shù)據(jù)后再new,也可以先new后,獲取完數(shù)據(jù)調(diào)用refresh。
實例時需要傳入一個配置參數(shù),由于參數(shù)比較多,具體的請參考文檔,這里只講2個重點的:
//是否開啟下拉刷新,可傳入true或者false,如果需要更多配置可以傳入一個對象 pullDownRefresh:{ threshold:80, stop:40 } //是否開啟上拉加載,同上,上拉無stop參數(shù),這里需要注意是負數(shù) pullUpLoad:{ threshold:-80, } /** * * @param threshold 觸發(fā)事件的閥值,即滑動多少距離觸發(fā) * @param stop 下拉刷新后回滾距離頂部的距離(為了給loading留出一點空間) */
以上的數(shù)字個人感覺比較合適,但是這里有一個問題,由于我采用的是淘寶flexible.js來適配,這就導致:在安卓下80這個距離是合適的,但是到了iphone6s下,由于被縮放了3陪,所以現(xiàn)在80在iphone6s下就是27左右了。
所以,對于不同縮放程度的屏幕,還需要乘以對應的縮放比。
淘寶flexible.js里面其實已經(jīng)有這個獲取屏幕縮放比方法,這里直接從里面拿:
//在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 });
實例化后,接下來就是監(jiān)聽上拉和下拉事件了。betterScroll新增了一些事件,主要的有:
/*下拉事件*/ this.scroller.on('pullingDown',()=> {}); /*上拉事件*/ this.scroller.on('pullingUp',()=>{});
觸發(fā)上拉或者下拉事件后,需要我們調(diào)用 this.scroller.finishPullDown() 或者 this.scroller.finishPullUp() 來通知better-scroll事件完成。
大致的流程是這樣的:
this.scroller.on('pullingDown',()=> { <!-- 1. 發(fā)送請求獲取數(shù)據(jù) --> <!-- 2. 獲取成功后,通知事件完成 --> <!-- 3. 修改data數(shù)據(jù),在nextTick調(diào)用refresh --> });
通常操作完成后都需要我們手動觸發(fā)refresh方法來重新計算可滾動的距離,因此可以寫一個watch監(jiān)聽數(shù)據(jù)的變化,這樣我們只需要改變數(shù)據(jù),不用每次操作數(shù)據(jù)后都調(diào)用refresh方法。
watch:{ dataList(){ this.$nextTick(()=>{ this.scroller.refresh(); }) } },
如果你使用的版本還是舊的,那可以在on( scroll )事件的時候進行判斷來實現(xiàn)功能
this.scroller.on("scroll",(pos)=>{ //獲取整個滾動列表的高度 var height=getStyle(scroller,"height"); //獲取滾動外層wrap的高度 var pageHeight=getStyle(scrollWrap,"height"); //觸發(fā)事件需要的閥值 var distance=80*DEVICE_RATIO; //參數(shù)pos為當前位置 if(pos.y>distance){ //console.log("下拉"); //do something }else if(pos.y-pageHeight<-height-distance){ //console.log("上拉"); //do something }
為了防止多次觸發(fā),需要加2個開關類的東西;
var onPullUp=true; var onPullDown=true;
每次觸發(fā)事件時,將對應的開關設置為false, 等操作完成后,再重新設置為true,否則多次下拉或者上拉就會觸發(fā)多次事件。通過設置開關可以保證每次只有一個事件在進行。
最后,來封裝成一個組件
<template> <div ref="wrapper" class="list-wrapper"> <div class="scroll-content"> <slot></slot> </div> </div> </template>
由于每個頁面需要滾動的具體內(nèi)容都是不一樣的,所以用了一個插槽來分發(fā)。
組件需要的參數(shù)由父級傳入,通過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 }, }
組件掛載后,在事件觸發(fā)時并不直接處理事件,而是向父級發(fā)送一個事件,父級通過在模板v-on接收事件并處理后續(xù)的邏輯
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","當前狀態(tài):上拉加載"); } }); this.scroll.on('pullingDown',()=> { this.beforePullDown(); this.$emit("onPullDown","當前狀態(tài):下拉加載更多"); }); }
父組件在使用時,需要傳入配置參數(shù)Props以及處理子組件發(fā)射的事件,并且用具體的內(nèi)容并替換掉 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來獲取到子組件,可以調(diào)用子組件里面的方法;
computed:{ scrollElement(){ return this.$refs.scroll } }
完整的scroller組件內(nèi)容如下
<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","當前狀態(tài):上拉加載"); } }); this.scroll.on('pullingDown',()=> { this.beforePullDown(); this.$emit("onPullDown","當前狀態(tài):下拉加載更多"); }); },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>
具體內(nèi)容可以查看github , 項目地址如下:https://github.com/linrunzheng/vueApp
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- vue.js整合vux中的上拉加載下拉刷新實例教程
- 解決Vue使用mint-ui loadmore實現(xiàn)上拉加載與下拉刷新出現(xiàn)一個頁面使用多個上拉加載后沖突問題
- vue使用mint-ui實現(xiàn)下拉刷新和無限滾動的示例代碼
- vueScroll實現(xiàn)移動端下拉刷新、上拉加載
- vue插件mescroll.js實現(xiàn)移動端上拉加載和下拉刷新
- vue2.0 移動端實現(xiàn)下拉刷新和上拉加載更多的示例
- vue使用better-scroll實現(xiàn)下拉刷新、上拉加載
- vue移動端實現(xiàn)下拉刷新
- vue移動端下拉刷新和上拉加載的實現(xiàn)代碼
- vue實現(xiàn)原生下拉刷新
相關文章
淺談vue 組件中的setInterval方法和window的不同
這篇文章主要介紹了淺談vue 組件中的setInterval方法和window的不同,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07element ui中表單el-form的label如何設置寬度
這篇文章主要介紹了element ui中表單el-form的label如何設置寬度,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue前端el-input輸入限制輸入位數(shù)及輸入規(guī)則
這篇文章主要給大家介紹了關于vue前端el-input輸入限制輸入位數(shù)及輸入規(guī)則的相關資料,文中通過代碼介紹的介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09