关于Mint UI的下拉刷新,上滑加载更多的问题

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

clipboard.png

<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...

阅读 16k
5 个回答

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

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

楼主,把那个loadTop写在method里

你一开始就直接执行了加载的方法是不对的,mounted的时候你应该执行的是刷新的方法就可以;

loadmore 在初始化时会自动检测它的高度是否能够撑满其容器,如果不能则会调用 bottom-method,直到撑满容器为止。如果不希望使用这一机制,可以将 auto-fill 设为 false。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题