vue基於mint-ui元件loadmore實現上拉載入更多，下拉重新整理功能
那就開始程式碼了 ==》
先安裝 mint-ui
在main.js中引入mint-ui的css樣式：
import 'mint-ui/lib/style.css'
在router/index.js 引入元件：
import { Loadmore } from 'mint-ui';
Vue.component(Loadmore.name, Loadmore);
import { Spinner } from 'mint-ui';
Vue.component
然後再新建一個vue元件，放置你的內容：
<template>
<div class="page-loadmore">
<div class="page-title" style="text-align:center;">頁面頭部</div>
<div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
<mt-spinner
<mt-loadmore :top-method="loadTop" @translate-change="translateChange" @top-status-change="handleTopChange"
:bottom-method="loadBottom" @bottom-status-change="handleBottomChange
:auto-fill="false" ref="loadmore">
<!-- :auto-fill="true" 時頁面載入完畢時 預設執行loadBottom 值為false時 自己寫一個載入 -->
<ul class="page-loadmore-list" v-if="list>0">
<li v-for="(item,index) in list" :key="index" class="page-loadmore-listitem">{{ item }}</li>
</ul>
<div slot="top" class="mint-loadmore-top" style="text-align:center">
<span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
<mt-spinner v-show="topStatus == 'loading'" color="#26a2ff"></mt-spinner>
</div>
<div v-if="allLoaded" style="text-align:center;">沒有更多資料了</div>
<div slot="bottom" class="mint-loadmore-bottom">
<span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
<span v-show="bottomStatus === 'loading'">
<mt-spinner v-show="bottomStatus == 'loading'" color="#26a2ff"></mt-spinner>
</span>
</div>
</mt-loadmore>
</div>
<div class="page-footer">頁面底部</div>
</div>
</template>
<script>
export default {
data(){
return {
pageNum: 1,//頁碼
InitialLoading: true,//初始載入
list: 0,//資料
allLoaded: false,//資料是否載入完畢
bottomStatus: '',//底部上拉載入狀態
wrapperHeight: 0,//容器高度
topStatus: '',//頂部下拉載入狀態
translate: 0,//
moveTranslate: 0,
}
},
mounted(){
let windowWidth = document.documentElement.clientWidth;//獲取螢幕高度
if(windowWidth>768){//這裡根據自己的實際情況設定容器的高度
this.wrapperHeight = document.documentElement.clientHeight - 130;
}else{
this.wrapperHeight = document.documentElement.clientHeight - 90;
}
setTimeout(()=>{//頁面掛載完畢 模擬資料請求 這裡為了方便使用一次性定時器
this.list = 12;
},1500)
},
methods:{
handleBottomChange(status) {
this.moveTranslate = 1;
this.bottomStatus = status;
},
loadBottom() {
this.handleBottomChange("loading");//上拉時 改變狀態碼
this.pageNum += 1;
setTimeout(() => {//上拉載入更多 模擬資料請求這裡為了方便使用一次性定時器
if(this.pageNum <= 3){//最多下拉三次
this.list += 12;//上拉載入 每次數值加12
}else{
this.allLoaded = true;//模擬資料載入完畢 禁用上拉載入
}
this.handleBottomChange("loadingEnd");//資料載入完畢 修改狀態碼
this.$refs.loadmore.onBottomLoaded();
}, 1500);
},
handleTopChange(status) {
this.moveTranslate = 1;
this.topStatus = status;
},
translateChange(translate) {
const translateNum = +translate;
this.translate = translateNum.toFixed(2);
this.moveTranslate = (1 + translateNum / 70).toFixed(2);
},
loadTop() {//下拉重新整理 模擬資料請求這裡為了方便使用一次性定時器
this.handleTopChange("loading");//下拉時 改變狀態碼
this.pageNum = 1;
this.allLoaded = false;//下拉重新整理時解除上拉載入的禁用
setTimeout(() => {
this.list = 12;//下拉重新整理 資料初始化
this.handleTopChange("loadingEnd")//資料載入完畢 修改狀態碼
this.$refs.loadmore.onTopLoaded();
}, 1500);
},
}
}
</script>
<style scoped>
.page-title,
.page-footer {
text-align: center;
position: absolute;
}
.page-title {
top: 0;
left: 0;
width: 100%;
height: 50px;
line-height: 50px;
}
.page-footer {
left: 0;
bottom: 0;
width: 100%;
height: 40px;
line-height: 40px;
}
.page-title+* {
margin-top: 50px;
}
@media (min-width: 768px){
.page-title {
height: 90px;
line-height: 90px;
}
.page-title+* {
margin-top: 90px;
}
}
.page-loadmore-listitem {
height: 50px;
line-height: 50px;
text-align: center
}
.page-loadmore-listitem {
border-top: 1px solid #eee
}
.page-loadmore-wrapper {
overflow: scroll
}
.page-loadmore-list {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
</style>
寫完這些 基本上就能夠實現上拉載入下拉重新整理的功能了 然後就是在事件裡面加上網路請求把資料渲染在檢視上
專案演示地址：http://mint.wkm123.com/LoadMore