亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

H5下拉加載

標簽:
Html5 JavaScript

html代码

<div class="player">
        <div class="player_box">
            <volist name='list' id='vo'>
                <div class="player_l">
                    <div class="uesr_img_box">
                        <a href="{:U('detail',array('uid'=>$vo['uid'],'vote_item_id'=>$vo['vote_item_id']))}">
                            <div class="img_userBox">
                                <img class="uesr_img" src="{$vo['pic_arr'][0]}">
                            </div>
                            <div class="number">{$vo.user_num}</div>
                        </a>
                    </div>
                    <div class="title">
                        <span class="name">{$vo.name}</span>
                        <span class="num">{$vo.vote_num|num_format_w=###}人气</span>
                    </div>
                    <button class="btn" alt="{$vo.uid}" title="{$vo.name}">支持Ta</button>
                </div>
            </volist>
        </div>
    </div>

    <!--上拉提示-->
    <div id="jiazaizhong" class="none">加载中...</div>

js代码

//下拉加载更多
    $(function () {
        var pageIndex = 1;
        //获取滚动条当前的位置
        function getScrollTop() {
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            } else if (document.body) {
                scrollTop = document.body.scrollTop;
            }
            return scrollTop;
        }

        //获取当前可视范围的高度
        function getClientHeight() {
            var clientHeight = 0;
            if (document.body.clientHeight && document.documentElement.clientHeight) {
                clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
            } else {
                clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
            }
            return clientHeight;
        }

        //获取文档完整的高度
        function getScrollHeight() {
            return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
        }

        window.onscroll = function () {
            if (getScrollTop() + getClientHeight() == getScrollHeight()) {
                $("#jiazaizhong").removeClass("none");
                pageIndex++;
                $.ajax({
                    url: url + "index.php/index/index",
                    type: "post",
                    dataType: "json",
                    async: false,
                    data: {
                        vote_item_id: "1",
                        page: pageIndex,
                        api: "1"
                    },
                    success: function (res) {
                    <!--总数除以每页的条数,得到初步页数-->
                        var cont = (res.data.total_record) / (res.data.page_size);
                        let obj2 = res.data;
                        <!--得到准确的页数(30/10 = 3 页, 32/10 = 4 页)-->
                        if (parseInt(cont) == cont) {
                            var cont2 = cont
                        } else {
                            var cont2 = parseInt(cont) + 1
                        }
                        if (pageIndex <= cont2) {
                            for (var i = 0; i < res.data.page_size; i++) {
                                $(".player_box").append(
                                    '<div class="player_l">\n' +
                                    '<div class="uesr_img_box">\n' +
                                    '<a href="/index.php/Index/detail/uid/' + obj2[i].uid + "/vote_item_id/" + obj2[i].vote_item_id + ".html" + '">\n' +
                                    '<div class="img_userBox">\n' +
                                    '<img class="uesr_img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="' + obj2[i].pic_arr[0] + '">\n' +
                                    '</div>\n' +
                                    '<div class="number">' + obj2[i].user_num + '</div>\n' +
                                    '</a>\n' +
                                    '</div>\n' +
                                    '<div class="title">\n' +
                                    '<span class="name">' + obj2[i].name + '</span>\n' +
                                    '<span class="num">' + obj2[i].vote_num + '人气</span>\n' +
                                    '</div>\n' +
                                    '<button class="btn" alt="' + obj2[i].uid + '" title="' + obj2[i].name + '">支持Ta</button>\n' +
                                    '</div>\n'
                                );
                            }
                        } else {
                            $("#jiazaizhong").text("到底了...")
                        }
                    },
                    error: function () {
                        console.log("请求失败")
                    }
                })
            }
        };
    });
點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
0
獲贊與收藏
0

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消