筆記-移動端滑動到底部自動加載下一頁內容

公司微信公眾號的網頁由ThinkPHP框架的模板生成，由一個需求是滑動到底部時自動加載下一頁內容。

1、網頁結構

網頁分為兩個部分，頂部固定導航欄，下部有一個page容器，內部滾動顯示。

2、加載下一頁的流程

當滑動到底部時，發送ajax請求下一頁內容，內容返回后，將內容拼接成HTML結構后插入原有的page下。

頁面是后端已經分好的，所以ajax請求的數據中包含一個currentpage變量，這個變量每次請求時自增1，表示請求下一頁。

3、如何實現

想着原理比較簡單，所以自己實現了一下，實現思路便是通過滾動事件監聽“加載更多”這個page最底部的div的位置，他的offset.top+自身height=整個屏幕height時，便代表滾動到底部了，可以開始ajax請求了。

根據實際項目需求，簡單封裝了一下這個過程：

function Loading_zc(isleft_bool, post_data_json, create_html_func, url_str) {
    this.isleft = isleft_bool;
    this.isloading = false;
    this.url = url_str;
    this.info = post_data_json;
    this.create_html = create_html_func.bind(this);
    this.box_height = $('#container').height();
    this.loading_timer = null;
}

Loading_zc.prototype = {
    constructor: Loading_zc,

    load_more: function() {
        var _this = this;
        $('.weui-loadmore').html('<span class="weui-loadmore__tips click_to_load">加載更多</span>');
        $(".click_to_load").click(function(event) {
            if (!_this.isloading) {
                _this.fetch_by_ajax(_this.url, _this.info);
            }
        });
    },

    in_loading: function() {
        $('.weui-loadmore').html('<i class="weui-loading"></i><span class="weui-loadmore__tips">正在加載</span>');
    },

    no_more: function() {
        $('.weui-loadmore').html('<span class="weui-loadmore__tips">無更多數據</span>');
    },

    show_date: function(str) {
        var d = + str.substr(6,13);
        var _date = new Date(d);
        var year = _date.getFullYear();
        var month = ('' + (+_date.getMonth() + 1)).length == 2 ? (+_date.getMonth() + 1) : '0' + (+_date.getMonth() + 1);
        var date = _date.getDate();
        return year+ '/' + month + '/' + date;
    },

    show_week: function(str) {
        var d = + str.substr(6,13);
        var _date = new Date(d);
        var day = _date.getDay();
        var week_arr=["周日","周一","周二","周三","周四","周五","周六"];
        return week_arr[day];
    },

    fetch_by_ajax: function(url, info) {
        var _this = this;
        console.log('start loading');
        this.isloading = true;
        this.in_loading();
        this.info.currentpage += 1;

        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            data: {info: info},
            success: function(data) {
                _this.isloading = false;

                if (data.isleft) {
                    _this.load_more();
                }else{
                    _this.no_more();
                    _this.isleft = false;
                }

                var _h = _this.create_html(data.datas);
                $(_h).insertBefore('.weui-loadmore');
            }
        });
    },

    init: function() {
        var _this = this;
        $(".page").on('scroll', function() {
            if (!_this.isleft || _this.isloading) {
                return false;
            }
            if (_this.loading_timer) {
                clearTimeout(_this.loading_timer);
            }

            _this.loading_timer = setTimeout(function() {
                var o = $('.weui-loadmore').offset();
                if (o.top + o.height - 3 <= _this.box_height) {
                    _this.fetch_by_ajax(_this.url, _this.info);
                }
            }, 100);
        });

        $(".click_to_load").click(function(event) {
            if (!_this.isloading) {
                _this.fetch_by_ajax(_this.url, _this.info);
            }
        });
    }
};

調用邏輯：

    // -----------------------------------
    // ---------loading_zc.js-ajax加載數據
    // 1-是否有剩余數據
    var isleft = "{$isleft}";
    // 2-拼裝post數據
    var regcode = "{$regcode}";
    var consumermid = + "{$consumermid}";
    var startTime = "{$starttime}";
    var endTime = "{$endtime}";
    var currentpage = + "{$currentpage}";
    var info = {
        "regcode": regcode,
        "consumermid": consumermid,
        "startTime": startTime,
        "endTime": endTime,
        "currentpage": currentpage
    };
    // 3-將ajax返回數據進行拼裝
    function create_html(datas) {
        var len = datas.length;
        var _html = '';

        for (var i = 0; i < len; i++) {
            var data = JSON.parse(datas[i]);
            console.log(data);
            var pt = data.PayTime.substr(6, 10);
            var item = '<a href="/WxPurchase/purchaseHistoryDetail?billmid=' +
                       data.Mid + '&regcode={$regcode}&regname={$regname}&payprice=' + 
                       data.PayTotal + '&petname=' + data.PetName + '&paytime=' + pt + '">' +
                         '<div class="weui-panel weui-cell_access">' +
                           '<div class="weui-panel__bd">' +
                             '<div class="weui-media-box weui-media-box_text">' +
                               '<h4 class="weui-media-box__title">-￥' + data.PayTotal + '</h4>' +
                               '<p class="weui-media-box__desc">' + this.show_date(data.PayTime) + '（' + this.show_week(data.PayTime) + '）' +
                               '&nbsp;&nbsp;&nbsp;&nbsp;寵物：' + data.PetName + '</p></div></div><span class="weui-cell__ft"></span></div></a>';
            _html += item;
        }

        return _html;
    }
    // 4-post目標url
    var url = '/WxPurchase/ajaxPurchaseHistory';
    // 5-創建實例並加載
    var loading = new Loading_zc(isleft, info, create_html, url);
    loading.init();
    // -----------------------------------

其中監聽滾動的時候注意函數節流，快速滾動時不要每次都計算一下底部div的位置。

show_date和show_week在業務的個別情況下用到。

4、實現效果

效果就是像第一個圖一樣（這里每頁顯示1個），由於內容太少無法滾動，所以可以使用點擊加載更多來實現加載，這時“加載更多”會變成“正在加載”，當請求完畢，會根據請求結果中的isleft（表示是否還有更多數據可以請求，這里是后端給的）字段來判斷是顯示“加載更多”或者顯示“無更多數據”。

5、下一步需要解決的問題

跳轉到其他鏈接后再點擊返回到這一頁時，ajax請求結果便都沒有了，這個問題可能可以通過處理history對象來解決。