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);

　　　　　　　　}

　　　　　　}

　　　　})

　　　}   

    }

 

文章來源於 》》   竹生雲野處   博客