之前总结过一个页面存在多个下拉加载的处理方式，今天再来说一下在消息页面的上拉加载和下拉刷新，基本上每个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）一个页面使用多个上拉加载后冲突问题‘