vue.js - 关于Mint UI的下拉刷新，上滑加载更多的问题

问题描述

问 题

按照Mint ui里面的loadmore
出现以下问题
1.页面加载完成还未下拉时就已出现（下面的上滑也是一样，还未触发就会出现）

<loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
                        <div class="card facebook-card" v-for="item in mes">
                            <div class="card-header no-border">
                                <div class="facebook-avatar">
                                    <img :src="item.userHeadImg" alt=""width="34" height="34"/>
                                </div>
                                <div class="facebook-name">{{item.userName}}</div>
                                <div class="facebook-date">{{item.startTime}}</div>
                            </div>
                            <div class="card-content">
                                <img :src="item.headImage" alt="" width="100%"/>
                            </div>
                            <div class="card-footer no-border">
                                <a href="#" class="link">{{item.likeCount}}赞</a>
                                <a href="#" class="link">评论</a>
                                <a href="#" class="link">分享</a>
                            </div>
                        </div>
                     </loadmore>

js

methods:{
              getList:function(page){
                this.$http.get("https://apis.baidu.com/qunartravel/travellist/travellist",{
                    params:{
                        page:this.page,
                    },
                    headers:{
                        'apikey':'06ad8ab76e20c1fb0a04cfd9ce4f5e0c'
                    }    
                }).then(function(res){
                    //this.mes=this.mes.concat(res.body.data.books);  数据追加
                    this.mes=res.body.data.books;
                    console.log(this.mes);
                },function(err){
                    console.log(err);
                    this.success=false;
                })
            },
              loadTop(id){
                  console.log(this.page);
                  //默认是第三页，下拉刷新的时候获取第一页
                  this.page=1;
                  this.getList(this.page);
                  this.$refs.loadmore.onTopLoaded(id);
                  console.log("id="+id);
              },
              loadMore(){
                  console.log("loadMore");
                  
              },
              loadBottom(id) {
                  console.log("下方在执行id="+id)
                  //this.page++;
                  //this.getList(this.page);
            //  this.$refs.loadmore.onBottomLoaded(id);
            }

          }

我在loadTop方法中使用的this.$refs.loadmore.onTopLoaded(id);好像并没有什么作用
github地址：https://github.com/angerlover...

解决方案

问题已经解决 需要加上@top-status-change，具体可以去看我github源码

 <loadmore :top-method="loadTop" ref="loadmore" @top-status-change="handleTopChange">

这篇关于vue.js - 关于Mint UI的下拉刷新，上滑加载更多的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！