笔记-移动端滑动到底部自动加载下一页内容

Posted 2020-09-18 ZhangCui

公司微信公众号的网页由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对象来解决。