使用vue做移动端瀑布流分页

讲到瀑布流分页有一个方法一定是要用到的 pullToRefresh(),或者说还有一种代码量比较少，但是看起来不怎么高端的

这个也没什么好解释的，想了解的可以去百度一下

下面上代码

<div id="main" class="content"
     style="background-color: #FFFFFF; width: 100%;height:100%;position: absolute;overflow: hidden;">
    <div class="list-main-mian weui-form-preview infinite weui-pull-to-refresh" id="listwrap"
         style="height:100%; margin-top: 1px;overflow:auto;  z-index: 1">
     <!--下拉刷新-->
     <div class="weui-pull-to-refresh__layer" hidden id="downRefresh">
         <div class="weui-pull-to-refresh__arrow"></div>
         <div class="weui-pull-to-refresh__preloader"></div>
     </div>
     <div class="weui-form-preview" id="Tolist">
            <!--内容展示区域-->
        <div id="app" v-cloak>
            <!--状态栏-->
            <div class="nav" >
                <a href="${ctx}/mobile/activity/home.jsp">
                    <button><img src="${ctx}/mobile/activity/img/Arrow.png"/></button>
                </a>
                <span>活动列表</span>
                <div>
                
                </div>
            </div>
            <button class="See popup-opu" style="border: 0px;"></button>
            <a :href="toActivityDetail(item.activityEntity.recno)" v-for="(item,index) in edRecomList">
                <div class="Result">
                    <div class="shop-img">
                        <img v-bind:src="getImages(item.activityEntity.themeImage)"/>
                    </div>
                    <div class="describe">
                        <div class="Price">
                            <span class="Trade-name">{{item.activityEntity.name}}</span>
                            <div class="fuzhu">
                                <div class="Price-address">
                                    <div></div>
                                    <span>{{item.activityEntity.address}}</span>
                                </div>
                            </div>
                            <span class="Number">
                        <span> {{item.activityEntity.count}}人参加</span>
                    </span> 
                            <span class="price-time">{{formatDate(item.activityEntity.begdate)}}~{{formatDate(item.activityEntity.enddate)}}</span>
                        </div>
                    </div>
                    <li class="Dividing"></li>    
                    <div :class="getClass(item.activityEntity.state)">{{['','发布','进行','暂停','结束'][item.activityEntity.state]}}</div>
                </div>
            </a> 
        <!-- <a @click="queryDate()" v-show="more"  
            class="weui-btn weui-btn_disabled weui-btn_default" style="margin-bottom: 60px;">加载更多</a> -->
            <%--滚动--%>
            <div id="scrollItem" style="height: 1px"></div> 
        </div>
      </div>
      <div id="bottomRefresh" class="weui-loadmore" style="margin-bottom: 64px">
           <div id="bottomRefreshTip" style="text-align: center">
               数据已全部加载
           </div>
           <div id="bottomRefreshContent" style="visibility: hidden">
               <i class="weui-loading"></i>
               <span class="weui-loadmore__tips">正在加载</span>
           </div>
       </div>
    </div>
    <a style="display:none" href="javascript:;"  id="btn"  title="回到顶部"></a>
</div>

接下来就是js代码 

var bottomRefreshContent = $("#bottomRefreshContent");
    var listWarp = $("#listwrap");
    var bottomRefreshTip = $("#bottomRefreshTip");
    var downRefresh = $("#downRefresh"); 
    listWarp.pullToRefresh().on("pull-to-refresh", function () {
        downRefresh.show();   
        vm.queryDate(function (data) {
            downRefresh.hide();
            listWarp.pullToRefreshDone(); // 重置下拉刷新
            //重置数据为第一页
            vm.edRecomList = data.result.rows
        });
        // }, 1000);

    });
    var loading = false;  //状态标记
    listWarp.infinite(80).on("infinite", function () {
        if (loading) return;
        loading = true;
        bottomRefreshContent.css("visibility", "visible");
        bottomRefreshTip.css("visibility", "hidden");
        vm.initPage.page = vm.initPage.page+1;
        vm.param.page = vm.initPage;
        // setTimeout(function () {
        vm.queryDate(function () {
            loading = false;
        });
        // }, 1000);
    });

var vm = new Vue({
    el: '#app',
        data: {
            edRecomList:[]
            ,more: false
            ,type:""
            ,initPage: { 
                page: 1,
                pageSize: 8
            }
            ,param: {}
            ,total:0
        },
 methods: {
            queryDate: function(callFun){
                var that = this;
                //查询类型
                this.param.type = this.type
                $.post("${ctx}/mobile/activity/selectEdRecommendList.do",{"param":JSON.stringify(this.param)} ,function (data) {
                    if(data.state == 200){
                        if (data.result.rows.length > 0) {
                            that.edRecomList = that.edRecomList.concat(data.result.rows);
                            if (data.result.rows.length < that.initPage.pageSize) {  
                                //隐藏加载中提示
                                bottomRefreshContent.css("visibility", "hidden");
                                bottomRefreshTip.css("visibility", "visible");
                            } else {
                                //隐藏数据全部完成提示
                                bottomRefreshContent.css("visibility", "visible");
                                bottomRefreshTip.css("visibility", "hidden");
                            }
                            if (callFun) {
                                callFun(data)
                            }
                        }else{
                            //隐藏加载中提示
                            bottomRefreshContent.css("visibility", "hidden");
                            bottomRefreshTip.css("visibility", "visible");
                        }
                    }
                } ,'json');
            },

    },
 mounted: function () {
            this.param.page = this.initPage;  
                this.queryDate(); 
        } 
    
})

 方法二

 $(window).on("resize scroll", function () {
        var windowHeight = $(window).height();//当前窗口的高度
        var scrollTop = $(window).scrollTop();//当前滚动条从上往下滚动的距离
        var docHeight = $(document).height(); //当前文档的高度
        // console.log(scrollTop, windowHeight, docHeight);
        //当 滚动条距底部的距离 + 滚动条滚动的距离 >= 文档的高度 - 窗口的高度
        //换句话说：（滚动条滚动的距离 + 窗口的高度 = 文档的高度）  这个是基本的公式
        if (scrollTop + windowHeight >= docHeight) {
            //vm.nextActivityPage();
            vm.getSelectData(4);
　　　　　　//这里是执行的方法，在编写过程中，可能会遇到一个问题，就是数据会无故累加，
　　　　　　//这里需要判断一下当前查询的数据是否是最后一页数据，如果是，就不再执行下一次分页

　　　　}　　　　　　
    });

 方法三 使用vue的组件@scroll

贴代码

<div class="list"  @scroll="loadMore($event)">
</div>

 loadMore: function (e) {
                if (
                    e.currentTarget.scrollTop + e.currentTarget.clientHeight >=
                    e.currentTarget.scrollHeight
                ) {
                    this.getData();//业务逻辑代码
                }
            }