那就開始代碼了 ==》
先安裝 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(Spinner.name, Spinner);
然後再新建一個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 v-show="list<1 && InitialLoading" color="#26a2ff"></mt-spinner>
<mt-loadmore :top-method="loadTop" @translate-change="translateChange" @top-status-change="handleTopChange"
:bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded"
: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://www.wkm123.com/demos/mint/#/LoadMore