結合Vue 的滾動底部加載

時間 2019-12-05

標籤結合 vue 滾動底部加載简体版

原文原文鏈接

項目手機端分頁跳轉不理想，本身作了一個滾動加載的一個Demophp

核心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

感謝你閱讀個人文章，若是有錯誤或不足能夠給我評論留言

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。