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