Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记

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