Vue加jQuery，移动端h5页面页面滑动到底部加载下一页

最新推荐文章于 2023-07-06 11:22:36 发布

Zan^Z

最新推荐文章于 2023-07-06 11:22:36 发布

阅读量639

点赞数 1

分类专栏：小程序 H5 文章标签： html5 jquery vue

本文链接：https://blog.youkuaiyun.com/Zan_Z/article/details/118967460

版权

小程序同时被 2 个专栏收录

28 篇文章

订阅专栏

5 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用jQuery，实现在移动端H5页面滑动到底部时自动加载下一页内容的技术方案。通过监听滚动事件，判断页面是否到达底部，结合Ajax请求获取并动态插入新的数据，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//js页面
var index = 1;
$(document).ready(function () {
    List.init();
});

var List = {
    init: function () {
        this.getList();

        vdata = new Vue({
            el: '#form1',
            data: {
                super_list: [],
                loadisover: false,
                block:"none",
            },
            methods: {
                
            }
        });
    },
    getList: function () {
        var param = {};
        param["gid"] = "参数一"; 
        param["index"] = index;
        $.RX_post("接口名", param,
            function (d, s) {
                var data = $.parseJSON(d.d);
                console.log(data);
                if (index == 1) {
                    vdata.super_list = data.data.list;
                } else {
                    for (var i = 0; i < data.data.list.length; i++) {
                        vdata.super_list.push(data.data.list[i]);
                    }                  
                }
                vdata.block = 'block'; //用来隐藏页面加载时闪现的Vue代码
                if (data.data.list.length > 0) {
                    index = index + 1;
                } else {
                    vdata.loadisover = true; 
                }

            }, null, null, null, true);
    }, 
}
//滑动到底部
$(document).scroll(function () {
    var dc = $(document);
    if (dc.scrollTop()+2 >= dc.height() - $(window).height()) {
        console.log("滑动到底部");
        if (vdata.loadisover) return;
        List.getList();
    }
})