结合Vue 的滚动底部加载

小灰灰 2023-06-04 06:54 18阅读 0赞

项目手机端分页跳转不理想，自己做了一个滚动加载的一个Demo

> **核心Dom结构**

<body>
    <div id="Content">
        <div>
            <ul>
                <li v-for="l in list">{
       {l.title}}</li>
                <li class="loading" v-if="loading">加载中</li>
            </ul>
        </div>
    </div>
    </body>

> \`\`\` Javascript代码 \`\`\`

<script>
        var v = new Vue({
            el: "#Content",
            data: {
                list: [{title: "使用思维导图，优雅的完成自己的代码"},
                    {title: "左滑右滑的乐趣"},
                    {title: "Spring Cloud（九）高可用的分布式配置中心 Spring Cloud Config 集成 Eureka 服务q"},
                    {title: "【MYSQL】业务上碰到的SQL问题整理集合"},
                    {title: "2018年，前端应该怎么学？"},
                    {title: "前端 ajax 请求的优雅方案"},
                    {title: "SegmentFault 技术周刊 Vol.39 - 什么！服务器炸了？"},
                    {title: "Rokid 开发板试用，开启你的嵌入式开发之旅"},
                    {title: "我脑中飘来飘去的css魔幻属性"},
                    {title: "用python解决mysql视图导入导出依赖问题"},
                    {title: "underscore 系列之防冲突与 Utility Functions"},
                    {title: "基于手淘 flexible 的 Vue 组件：TextScroll -- 文字滚动"},
                    {title: "基于‘BOSS直聘的招聘信息’分析企业到底需要什么样的PHP程序员"},
                    {title: "原生js系列之无限循环轮播组件"},
                    {title: "一篇文章了解HTML文档流(normal flow)"},
                    {title: "面试官最爱的volatile关键字"},
                    {title: "Spring Cloud（九）高可用的分布式配置中心 Spring Cloud Config 集成 Eureka 服务q"},
                    {title: "【MYSQL】业务上碰到的SQL问题整理集合"},
                    {title: "2018年，前端应该怎么学？"},
                    {title: "前端 ajax 请求的优雅方案"},
                    {title: "SegmentFault 技术周刊 Vol.39 - 什么！服务器炸了？"},
                    {title: "Rokid 开发板试用，开启你的嵌入式开发之旅"},
                    {title: "我脑中飘来飘去的css魔幻属性"},
                    {title: "用python解决mysql视图导入导出依赖问题"},
                    {title: "underscore 系列之防冲突与 Utility Functions"},
                    {title: "基于手淘 flexible 的 Vue 组件：TextScroll -- 文字滚动"},
                    {title: "基于‘BOSS直聘的招聘信息’分析企业到底需要什么样的PHP程序员"},
                    {title: "原生js系列之无限循环轮播组件"},
                    {title: "一篇文章了解HTML文档流(normal flow)"},
                    {title: "面试官最爱的volatile关键字"},
                    {title: "Rokid 开发板试用，开启你的嵌入式开发之旅"}],
                page: 5,//总页数
                nowPage: 1,//本页
                loading: false,//一步加载时的限制
                bottomHight: 50,//滚动条到某个位置才触发时间
            },
            methods: {
                handleScroll: function () {
                    if (getScrollBottomHeight() <= v.bottomHight && v.nowPage < v.page && v.loading == false) {
                        v.loading = true
                        var url = "load.php"
                        $.ajax({
                            type: "GET",
                            url: url,
                            async: true,
                            dataType: "json",
                            success: function (data) {
                                for (var i = 0; i < data.length; i  ) {
                                    v.list.push(data[i])
                                }
                                v.nowPage  
                                v.loading = false
                            },
                        })
    
                    }
                }
            },
    
        })
        //添加滚动事件
        window.onload = function () {
            window.addEventListener('scroll', v.handleScroll)
        }
    
        //滚动条到底部的距离
        function getScrollBottomHeight() {
            return getPageHeight() - getScrollTop() - getWindowHeight();
    
        }
        //页面高度
        function getPageHeight() {
            return document.querySelector("html").scrollHeight
        }
        //滚动条顶 高度
        function getScrollTop() {
            var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
            if (document.body) {
                bodyScrollTop = document.body.scrollTop;
            }
            if (document.documentElement) {
                documentScrollTop = document.documentElement.scrollTop;
            }
            scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
            return scrollTop;
        }
        function getWindowHeight() {
            var windowHeight = 0;
            if (document.compatMode == "CSS1Compat") {
                windowHeight = document.documentElement.clientHeight;
            } else {
                windowHeight = document.body.clientHeight;
            }
            return windowHeight;
        }
    </script>

> **实现思路**

1.获得滚动条到底部的距离 getScrollBottomHeight()
    2.绑定滚动事件handleScroll()，handleScroll()判断滚动条到底部距离是否小于设置的bottomHight，并且增加一个loading属性，防止加载时滑动时多次触发，造成多次加载
    3.Ajax请求load.php，通过Page去查询获得当前页数（page 1）的内容
    4.将获取的内容，push 到 list中，完成后Vue 自动渲染新的列表，loading变为false

> 感谢你阅读我的文章，如果有错误或不足可以给我评论留言

原文地址：[https://segmentfault.com/a/1190000012440716][https_segmentfault.com_a_1190000012440716]

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[https_segmentfault.com_a_1190000012440716]: https://segmentfault.com/a/1190000012440716

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 滚动加载

![ba1b4a3943a24dc1b5b6fbcec50e2915.jpeg][] 在 Vue中，如果一个组件是一个 button，那就可以直接调用 input

港控/mmm°/ 2023年10月12日 09:03/ 0 赞/ 172 阅读

相关 Vue中点击加载更多滚动条滚动到页面最底部

<template> <div> <div class="table-container" ref="table-container">

淩亂°似流年/ 2023年10月11日 13:35/ 0 赞/ 176 阅读

相关怎样实现Vue下滚动到页面底部无限加载数据

　　这次给大家带来怎样实现Vue下滚动到页面底部无限加载数据，Vue下滚动到页面底部无限加载数据的注意事项有哪些，下面就是实战案例，一起来看一下。　　看到一篇Impleme

女爷i/ 2023年09月24日 07:51/ 0 赞/ 289 阅读

相关结合Vue 的滚动底部加载

项目手机端分页跳转不理想，自己做了一个滚动加载的一个Demo > 核心Dom结构 <body> <div id="Content"> <di

小灰灰/ 2023年06月04日 06:54/ 0 赞/ 19 阅读

相关 uni-app 滚动到底部加载更多数据

为页面底部添加正在加载动画，可以使用组件 [uLi-load-more][]，直接点击使用HBuilder 导入插件，可以不用引入和注册该组件，但 HBuilderX版本应高

﹏ヽ暗。殇╰゛Y/ 2023年01月09日 12:59/ 0 赞/ 445 阅读

相关 Js滚动条到底底部加载更多

[https://blog.csdn.net/qq\_40816649/article/details/86512538][https_blog.csdn.net_qq_408

傷城~/ 2022年12月27日 08:45/ 0 赞/ 328 阅读

相关 Vue监听滚动加载

前言在PC端，请求数据过多一般采用分页处理，在移动端，则一般使用滚动加载，通过监听元素滚动触底触发加载事件。用法 // template <d

ゞ浴缸里的玫瑰/ 2022年08月29日 10:09/ 0 赞/ 453 阅读

相关 listview滚动到底部自动加载数据

文章转自：[http://blog.csdn.net/coderinchina/article/details/40188295][http_blog.csdn.net_cod

ゝ一纸荒年。/ 2022年06月02日 11:59/ 0 赞/ 442 阅读

相关 jQuery 拉动滚动条到底部加载数据

代码很简单： <div id="assDiv" style="height: 350px;overflow-y: auto;" > </div

向右看齐/ 2022年04月14日 02:42/ 0 赞/ 496 阅读

相关 vue 实现滚动到页面底部开始加载更多

直接上代码： <template> <div class="newsList"> <div v-for="(items, index) i

快来打我*/ 2021年12月17日 08:47/ 0 赞/ 827 阅读