您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)如何在vue中使用mint-ui實(shí)現(xiàn)一個下拉刷新功能,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
1、為元素添加 v-infinite-scroll 指令即可使用無限滾動。滾動該元素,當(dāng)其底部與被滾動元素底部的距離小于給定的閾值(通過 infinite-scroll-distance 設(shè)置)時,綁定到 v-infinite-scroll 指令的方法就會被觸發(fā)。
<!--ul里面幾個scoller就是無限滾動的幾個api--> <ul class="mui-table-view" v-infinite-scroll="loadMore" infinite-scroll-disabled="moreLoading" infinite-scroll-distance="0" infinite-scroll-immediate-check="false"> <!--li數(shù)據(jù)遍歷循環(huán)部分--> <li class="mui-table-view-cell" v-for="item in list"> <a class="mui-navigate-right"> <span class="mui-pull-left">{{item.name}}</span> <span class="mui-pull-right">{{item.date.substring(0,10)}}</span> </a> </li> <!--底部判斷是加載圖標(biāo)還是提示“全部加載”--> <li class="more_loading" v-show="!queryLoading"> <mt-spinner type="snake" color="#00ccff" :size="20" v-show="moreLoading&&!allLoaded"></mt-spinner> <span v-show="allLoaded">已全部加載</span> </li> </ul>
2、script部分
<script> export default { data() { return { //初始化無限加載相關(guān)參數(shù) queryLoading: false, moreLoading: false, allLoaded: false, totalNum: 0, pageSize: 20, pageNum: 1, } }, computed: { params() { return{ //這里先定義要傳遞給后臺的數(shù)據(jù) //然后將每次請求20條的參數(shù)一起提交給后臺 pageSize: this.pageSize } } }, methods: { //無限加載函數(shù) loadMore() { if(this.allLoaded){ this.moreLoading = true; return; } if(this.queryLoading){ return; } this.moreLoading = !this.queryLoading; this.pageNum++; this.$http.post("請求后臺數(shù)據(jù)的接口",Object.assign({pageNum:this.pageNum},this.params)).then((res) => { if(res.sData && res.sData.list){ this.list = this.list.concat(res.sData.list); this.allLoaded = this.debtList.length==this.totalNum; } this.moreLoading = this.allLoaded; }); } }, } </script>
以上就是如何在vue中使用mint-ui實(shí)現(xiàn)一個下拉刷新功能,小編相信有部分知識點(diǎn)可能是我們?nèi)粘9ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。