mintui之上拉加載下拉刷新

前提，必須是裝好了mintui

父組件：

  引入子組件

<message :personalMsgList='personalMsgList' :feiSeverPage="feiSeverPage" v-on:loadBottom="loadBottom"></message>

import message from '../../components/message'
    export default {
        name: 'messageTeleplate',
        data() {
            return {
               personalMsgList:[],
               arr:[],
               feiSevercountText:'點擊獲取更多數據',
               feiSevercount:'',
               feiSeverPage:{page:1,status:true,NoData:false, allLoaded:false},
               feiNumber:null,
               feiSevercount:null
            }
        },
        props: {

        },
        components: {
            message
        },
        mounted() {
         this.messageList();
        },
        methods: {
            loadBottom(){
                //給后台傳入的參數
                let obj = this.qs.stringify({
                    list:10,
                    p:this.feiSeverPage.page
                })    
               this.messageList(obj);
            },
            //訪問接口
            messageList(obj){
                this.$axios.post('訪問的接口名稱', obj, res => {
                    
                      if(res.data.count == 0){
                           this.feiSeverPage.NoData = false;
                      }
                      res.data.data.forEach((item, index) => {
                         this.personalMsgList.push(item)
                      })       
                     
                      this.feiSevercount = Number(res.data.count);
                      this.feiNumber = Math.ceil( this.feiSevercount/10);
                      if(this.feiSeverPage.page == this.feiNumber){
                          this.feiSeverPage.status = false;
                          this.feiSeverPage.NoData = true;
                      }
                }, f => {
                    console.log(f)
                }, e => {
                    console.log(e)
                })
            }
            
        }
}

 

子組件中

<template>
    <div class="message">
        <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="feiSeverPage.allLoaded" :max-distance="150"
                 @top-status-change="handleTopChange" ref="loadmore">
            <ul class='feiServerListBox scroll-wrapper'>
                <li class="read conatiner" v-for="item in personalMsgList">
                    <div class="left">
                        <span :class="{messagetitle:item.is_read=='0'}">●</span>
                        <span :class="{messagetitle:item.is_read=='0'}">消息</span>
                    </div>
                    <div class="right">
                        <span>{{item.create_time}}</span>
                    </div>

                    <div class="messagetext">
                        {{item.msg_content}}
                    </div>
                </li>

            </ul>
            <div v-if="feiSeverPage.allLoaded && feiSeverPage.NoData" class="tc divallLoaded">{{bottomdropText}}</div>
        </mt-loadmore>
    </div>
</template>

<script>
    import { Indicator, Loadmore } from 'mint-ui';  //引入mintui
    export default {
        name: 'message',
        data() {
            return {
                loading:false,
                scrollMode:"auto", 
                page:1,//第幾頁
                num_page:7,//一頁顯示幾條
                count:'',
                bottomdropText:'數據加載完畢',
                scroll_end:false,
                allLoaded: false,
                topStatus: '',
                bottomStatus:''
            }
        },
        props: ['personalMsgList','feiSeverPage'],
        mounted() {
            //       console.log(this.personalMsgList)
        },
        methods: {
            handleBottomChange(status){
                 this.bottomStatus = status;
            },
            handleTopChange: function (status) {
                this.topStatus = status;
            },
            loadBottom() { // 加載更多數據的操作
                var self = this;
                if(this.feiSeverPage.status){
                    this.feiSeverPage.page = this.feiSeverPage.page + 1;
                       this.$emit('loadBottom');
                }else{
                    this.feiSeverPage.allLoaded = true;
                }
            }
            
        },
        components:{
          'v-loadmore':Loadmore
        }
    }
</script>

<style>
     .message{
        height:100%;
        overflow-y:scroll;
    }
</style>

 

  本文為博主原創文章，未經博主允許不得轉載  https://www.cnblogs.com/liujiajiablog/p/9453941.html                                                                                                                                                                                                                                                                                                                                                                                                       ----THE END