之前總結過一個頁面存在多個下拉加載的處理方式，今天再來說一下在消息頁面的上拉加載和下拉刷新，基本上每個app都會有消息頁面，會遇到這個需求
需求：每次加載十條數據，上拉加載下拉刷新，並且沒有點擊查看過的新消息前面會帶着紅點標記，點擊查看過后紅點消失
方法：
先引入import {Loadmore } from 'mint-ui';
HTML：
<mt-loadmore :top-method="loadTop"
:bottom-method="loadBottom"
:bottom-all-loaded="allLoaded"
ref="loadmore">
<ul class="ul-box starth" id="ul-box">
<li class="li-box" v-for="(item,index) in Data" :key="'list'+index" @click="goto_detail(item)">
<span class="mark"></span>
<div class="div-box">
<p class="type">{{item.title}}</p>
</div>
</li>
</ul>
</mt-loadmore>
JavaScript:
export default {
data() {
return {
griddata:[], //每次加載出來的新數據
Data:[], //每次加載累加后的總數據
allLoaded: false, //若為真，則
bottomMethod 不會被再次觸發
num:0, //num為0時表示刷新或第一次加載，每加載一次增加1，刷新時默認為0
readList:[], //紅點標記
}
},
methods:{
goto_detail(payload){ //跳轉到詳情頁
this.$router.push({path:'/detail'})
},
loadTop() { //下拉刷新
this.num=0;
this.update(0,'top');
},
loadBottom() { //上拉加載
this.num+=1;
let offset = this.num*10 //offset為分頁偏移量，這里是每次加載增加十條數據
this.update(offset,'bottom');
},
update(type){ //每次觸發上拉加載或下拉刷新時觸發的數據接口
let param = {
offset: offset,
number:10, //每頁多少條數據
}
news(param).then((ret) => {
if(ret.status_code==200){
if(offset==0){ //如果偏移量為0說明是下拉刷新所以Data為剛加載出來的數據
this.Data=ret.dataInfo
}else{ //偏移量大於0，說明為上拉加載，Data為前面鎖加載出來數據的累加
this.griddata=ret.dataInfo
let len=this.griddata.length
for(let i=0;i<len;i++){
this.Data.push(this.griddata[i]) //將新數據push到Data中
}
}
let read = '' //read為接口獲取的數據，為是否已讀的標記，當為0時未讀，為1時已讀
this.readList=[] //新數組，放所有加載出數據的read值
for(let i=0;i<this.Data.length;i++){
this.readList.push(this.Data[i].read);
}
}
//通過傳過來的type值不同分辨上拉加載或下拉刷新
if(type=='top'){
this.$refs.loadmore.onTopLoaded();
}else if(type=='bottom'){
this.$refs.loadmore.onBottomLoaded();
}
})
}
},
updated(){ //只要數據變化就會判斷一次數據是否已讀過，判斷標記的顯隱
let oSpan=document.getElementById("ul-box").getElementsByTagName("span");
for(let i=0;i<this.readList.length;i++){
if(this.readList[i]==0){
oSpan[i].className='mark is-red'
}else{
oSpan[i].className='mark'
}
}
},
created(){ //打開頁面首先自動獲取一次數據
let param = {
offset: 0, //打開頁面相當於初次加載
number:10, //每頁多少條數據
}
news(param).then((ret) => {
if(ret.status_code==200){
this.Data=ret.dataInfo
let read = '' //read為接口獲取的數據，為是否已讀的標記，當為0時未讀，為1時已讀
this.readList=[] //新數組，放所有加載出數據的read值
for(let i=0;i<this.Data.length;i++){
this.readList.push(this.Data[i].read);
}
}
})
}
}
總結：最好不要給ul-box設置固定高度，這樣會上拉加載出現bug，可以多嘗試一下，自己寫的代碼，如有其他問題或者更好的解決方法歡迎交流
關於文中一些具體方法的解釋在另一篇文中有提及，’
Vue-上拉加載與下拉刷新（mint-ui：loadmore）一個頁面使用多個上拉加載后沖突問題‘