使用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);
　　　　　　//這里是執行的方法，在編寫過程中，可能會遇到一個問題，就是數據會無故累加，
　　　　　　//這里需要判斷一下當前查詢的數據是否是最后一頁數據，如果是，就不再執行下一次分頁

　　　　}　　　　　　
    });