zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    用Twebbrowser做可控编辑器与MSHTML(调用js)
    用Twebbrowser做可控编辑器与MSHTML(插入表格)
    用Twebbrowser做可控编辑器与MSHTML
    如何用firefox57看中国大学mooc视频
    学习EXTJS6(8)基本功能-表单的基础表字段Ext.form.field.Basic
    学习EXTJS6(7)基本功能-最常用的表单
    学习EXTJS6(6)基本功能-工具栏和菜单
    学习EXTJS6(5)基本功能-进度条组件
    学习EXTJS6(4)基本功能-信息提示框组件
    学习EXTJS6(3)基本概念
  • 原文地址:https://www.cnblogs.com/liujiajiablog/p/9453941.html
Copyright © 2011-2022 走看看