vux-scroller實(shí)現(xiàn)移動(dòng)端上拉加載功能過(guò)程解析
本文將講述vue-cli+vux-scroller實(shí)現(xiàn)移動(dòng)端的上拉加載功能:
糾錯(cuò)聲明:網(wǎng)上查閱資料看到很多人都將vux和vuex弄混,在這里我們先解釋一下,vuex是vue框架自帶的組件,是數(shù)據(jù)狀態(tài)管理工具,vux是一款移動(dòng)端的UI組件庫(kù);
vux(官方文檔:https://doc.vux.li/zh-CN/)是基于WeUi和vue(2.x)開(kāi)發(fā)的移動(dòng)端的UI組件庫(kù),主要服務(wù)于微信頁(yè)面?;趙ebpack+vue-loader+vux可以快速開(kāi)發(fā)移動(dòng)端頁(yè)面,配合vux-loader方便你在WeUi的基礎(chǔ)上定制需要的樣式。vux-loader保證了組件按需使用,因此不用擔(dān)心最終打包了整個(gè)vux的組件庫(kù)代碼。vux并不完全依賴于WeUi,vux在WeUi的基礎(chǔ)上擴(kuò)展了多個(gè)常用組件,但是盡量保持整體UI樣式接近WeUi的設(shè)計(jì)規(guī)范。
首先我們需要安裝vux的依賴包,命令如下:
npm install vux --save
官方文檔聲明了vux必須配合vux-loader一起使用,所以我們需要在build/webpack.base.conf.js里參照如下代碼進(jìn)行配置:
const vuxLoader = require('vux-loader') const webpackConfig = originalConfig // 原來(lái)的 module.exports 代碼賦值給變量 webpackConfig module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })
vux的Scroller組件為我們提供了上拉加載和下拉刷新等功能,雖然官方文檔已經(jīng)聲明了不再更新此組件,但是目前的版本基本滿足于我們的日常開(kāi)發(fā),所以還是可以使用的;
我們?cè)诮M件中使用的時(shí)候是需要引入對(duì)應(yīng)組才能進(jìn)行使用的;
import { Scroller } from 'vux'
HTML視圖層代碼:
//height是設(shè)置滾動(dòng)區(qū)域高度,vux對(duì)該組件聲明的不夠詳細(xì),多次調(diào)試-170是可以使用,如有更好的算法或者理解歡迎跟博主溝通交流 //on-scroller-bottom 滾動(dòng)事件 這個(gè)事件在滾動(dòng)的時(shí)候會(huì)進(jìn)行多次觸發(fā) //scroll-bottom-offst 在底部什么位置觸發(fā)事件,這里配置的是距離底部200px的地方滑動(dòng)就可以觸發(fā) //ref 給scroller組件添加ref方便操作DOM,這是個(gè)小技巧,后面會(huì)用到 <scroller height="-170" lock-x @on-scroll-bottom="onScrollBottom" :scroll-bottom-offst="200" ref="scrollerBottom"> //scroller標(biāo)簽內(nèi)部必須包裹一層div,小技巧,不然會(huì)出現(xiàn)滑不到底部的問(wèn)題 // 這個(gè)div的高度必須要高于底部滾動(dòng)區(qū)域的高度,不然滾動(dòng)不了 <div> <p>滾動(dòng)內(nèi)容區(qū)域</p> </div> //這個(gè)div是展示提示信息的 <div> <div id="title" style="width:100%;text-align:center;height:30px;ling-height:30px;margin-top:20px;">上拉加載更多</div> </div> </scroller>
js數(shù)據(jù)邏輯層代碼:
// 上拉加載滑動(dòng)的方法 onScrollBottom () { //onFetching是個(gè)狀態(tài)變量,默認(rèn)值設(shè)為false來(lái)進(jìn)行控制觸發(fā)事件及更改提示信息 if (this.onFetching) { } else { //默認(rèn)值onFetching為false,所以提示信息首先就是加載中,我們這里用的是原生的DOM操作方法 document.getElementById("title").innerHTML="加載中..."; //onFetching賦值為true,下次觸發(fā)的時(shí)候會(huì)觸發(fā)onFetching為true的情況 this.onFetching = true; setTimeout(() => { //此處的pageNum是當(dāng)前頁(yè)碼,默認(rèn)為1,每滑動(dòng)一次都this.pageNum++然后傳入?yún)?shù)調(diào)用接口 this.pageNum+=1; this.$nextTick(() => { this.$refs.scrollerBottom.reset() }) //后臺(tái)請(qǐng)求接口 this.$http({ url:"traderecords/getPersonTradDetail", method:"get", params:{ pageSize:10, //動(dòng)態(tài)的給pageNum賦值,保證每次的參數(shù)都不一樣,后臺(tái)傳過(guò)來(lái)的數(shù)據(jù)也不一樣 pageNum:this.pageNum, brandId:this.$route.query.brandId, date:this.value2 } }).then((res)=>{ console.log(res.data.data.rowMaps); //如果接口請(qǐng)求成功 if(res.data.code==200){ //接口請(qǐng)求成功并且返回的數(shù)組的長(zhǎng)度<10不夠一頁(yè)的時(shí)候 if(res.data.data.rowMaps.length<10){ // end是控制提示信息的,不觸發(fā)滑動(dòng)的時(shí)候是不展示的,默認(rèn)值為false this.end=true; //返回的數(shù)組長(zhǎng)度不夠一頁(yè)的時(shí)候提示信息修改為沒(méi)有更多數(shù)據(jù) document.getElementById("title").innerHTML="沒(méi)有更多數(shù)據(jù)了..."; // 當(dāng)數(shù)組長(zhǎng)度小于10時(shí),該方法禁用 this.$refs.scrollerBottom.disablePullup() ; } else{ //否則提示信息為加載成功 document.getElementById("title").innerHTML="加載成功"; } //dataList是我聲明的空數(shù)組,用concat方法把新數(shù)組和后臺(tái)返回的數(shù)據(jù)進(jìn)行拼接然后重新賦值給dataList,這個(gè)是關(guān)鍵 this.dataList=this.dataList.concat(res.data.data.rowMaps); console.log(this.dataList); //加載成之后提示信息改為上拉加載更多 document.getElementById("title").innerHTML="上拉加載更多"; } //再把onFetching的狀態(tài)值改為false this.onFetching = false }) }, 500) } },
到這里,我們的上拉加載功能就實(shí)現(xiàn)了,一般情況下上拉加載是和下拉刷新一起用的,vux都給我們提供了組件,由于項(xiàng)目需要暫時(shí)只用到了上拉加載,代碼看似很多,其實(shí)不是很復(fù)雜;
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中v-model語(yǔ)法糖的三種寫(xiě)法詳解
這篇文章主要為大家詳細(xì)介紹了Vue3中v-model語(yǔ)法糖的三種寫(xiě)法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01安裝vue無(wú)法運(yùn)行、此系統(tǒng)無(wú)法運(yùn)行腳本問(wèn)題及解決
這篇文章主要介紹了安裝vue無(wú)法運(yùn)行、此系統(tǒng)無(wú)法運(yùn)行腳本問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue 接口請(qǐng)求地址前綴本地開(kāi)發(fā)和線上開(kāi)發(fā)設(shè)置方式
這篇文章主要介紹了vue 接口請(qǐng)求地址前綴本地開(kāi)發(fā)和線上開(kāi)發(fā)設(shè)置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08使用vue制作FullPage頁(yè)面滾動(dòng)效果
本篇文章主要介紹了使用vue制作FullPage頁(yè)面滾動(dòng)效果,詳細(xì)的介紹了FullPage頁(yè)面的思路和實(shí)現(xiàn),有興趣的可以了解一下2017-08-08vue自定義組件如何通過(guò)v-model指令控制組件的隱藏、顯示
這篇文章主要介紹了vue自定義組件如何通過(guò)v-model指令控制組件的隱藏、顯示,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05關(guān)于vue-lunar-full-calendar的使用說(shuō)明
這篇文章主要介紹了關(guān)于vue-lunar-full-calendar的使用說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07Vue3將虛擬節(jié)點(diǎn)渲染到網(wǎng)頁(yè)初次渲染詳解
這篇文章主要為大家介紹了Vue3將虛擬節(jié)點(diǎn)渲染到網(wǎng)頁(yè)初次渲染詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03