vue实现页面滚动到底部刷新(判断div)

最新推荐文章于 2025-06-17 16:26:55 发布

原创最新推荐文章于 2025-06-17 16:26:55 发布 · 8.6k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍如何在Vue项目中实现当用户滚动到页面底部时自动加载更多内容的功能，通过监听div滚动事件来判断是否触底，并触发后台数据的加载。

h5页面

 <script>
        var app = new Vue({
            el: '#app',
            data: {
                swiper: null,
                carousel: [],
                promotion: [],
                cates: [],
                //设置size初始为10
                size:10,
            },
            mounted: function () {
                //定义that用that.size获取size的值
                var that=this;
                getPromotion();
                //秒表每秒请求一次
                setInterval(function(){
                    //content是div类名
                    const el = document.querySelector('.content');
                    const offsetHeight = el.offsetHeight;
                    el.onscroll = () => {
                        const scrollTop = el.scrollTop;
                        const scrollHeight = el.scrollHeight;
                        if ((offsetHeight + scrollTop) - scrollHeight >= -1) {
                            //每次滚动到底部size+10
                            that.size+=10;
                        }
                    }
                    $.ajax({
                        type: "post",
                        url: "/news/search",
                        data: {intro: 'best', page: 1, size: that.size},
                        dataType: 'json',
                        success: function (data) {
                            $.hideIndicator();
                            if (data.errCode === 1) {
                                app.promotion = data.data.articleList;
                                // console.log(222);
                            } else {
                                $.toast(data.errMsg);
                            }
                        }
                    });
                },10*60);
                // window.addEventListener('scroll', this.scrollBottom());
            },
            methods: {
                goDetail: function (id) {
                    location.href = '/news/newsDetail/' + id;
                },


            },

        });
        //第一次加载先获取10条
        function getPromotion() {
            $.ajax({
                type: "post",
                url: "/news/search",
                data: {intro: 'best', page: 1, size: 10},
                dataType: 'json',
                success: function (data) {
                    $.hideIndicator();
                    if (data.errCode === 1) {
                        app.promotion = data.data.articleList;
                        // console.log(data);
                    } else {
                        $.toast(data.errMsg);
                    }
                }
            });
            $.showIndicator();
        }


    </script>

后台控制器

public function search()
    {
        $parm = array('act' => 'search');
        if (!empty($_POST['catId'])) $parm['catId'] = $_POST['catId'];
        if (!empty($_POST['keyword'])) $parm['keyword'] = $_POST['keyword'];
        if (!empty($_POST['intro'])) $parm['intro'] = $_POST['intro'];
        if (!empty($_POST['order'])) $parm['order'] = $_POST['order'];
        if (!empty($_POST['sort'])) $parm['sort'] = $_POST['sort'];
        if (!empty($_POST['page'])) $parm['page'] =1;
        //获取前台传过来的size值如果不为空就设置请求接口时多一个size参数
        if (!empty($_POST['size'])) $parm['size'] = $_POST['size'];
        //调用接口
        $data = $this->http('service/article.php', $parm);
        echo json_encode($data);
    }