其他分享
首页 > 其他分享> > 列表滚动加载(静态)

列表滚动加载(静态)

作者:互联网

本地静态滚动加载

html:

<div class="ranking-content">
        <div class="ranking-content__box" id="rankingList" data-page="1">
            <a href="游戏详情.html" class="ranking-content__list">
                <p class="l">1</p>
                <div class="c">
                    <img class="c-pic" src="https://img.d1xz.net/d/2022/04/625ec6337d3b9.png" alt="" />
                    <div class="c-info">
                        <p class="c-title">车祸模拟器</p>
                        <span class="c-score">9.2</span>
                    </div>
                </div>
                <div class="btn">启动</div>
            </a>
            <a href="游戏详情.html" class="ranking-content__list">
                <p class="l">2</p>
                <div class="c">
                    <img class="c-pic" src="https://img.d1xz.net/d/2022/04/625ec6337d3b9.png" alt="" />
                    <div class="c-info">
                        <p class="c-title">车祸模拟器</p>
                        <span class="c-score">9.2</span>
                    </div>
                </div>
                <div class="btn">启动</div>
            </a>
            <a href="游戏详情.html" class="ranking-content__list">
                <p class="l">3</p>
                <div class="c">
                    <img class="c-pic" src="https://img.d1xz.net/d/2022/04/625ec6337d3b9.png" alt="" />
                    <div class="c-info">
                        <p class="c-title">车祸模拟器</p>
                        <span class="c-score">9.2</span>
                    </div>
                </div>
                <div class="btn">启动</div>
            </a>
            <a href="游戏详情.html" class="ranking-content__list">
                <p class="l">4</p>
                <div class="c">
                    <img class="c-pic" src="https://img.d1xz.net/d/2022/04/625ec6337d3b9.png" alt="" />
                    <div class="c-info">
                        <p class="c-title">车祸模拟器</p>
                        <span class="c-score">9.2</span>
                    </div>
                </div>
                <div class="btn">启动</div>
            </a>
            <a href="游戏详情.html" class="ranking-content__list">
                <p class="l">5</p>
                <div class="c">
                    <img class="c-pic" src="https://img.d1xz.net/d/2022/04/625ec6337d3b9.png" alt="" />
                    <div class="c-info">
                        <p class="c-title">车祸模拟器</p>
                        <span class="c-score">9.2</span>
                    </div>
                </div>
                <div class="btn">启动</div>
            </a>
            <a href="游戏详情.html" class="ranking-content__list">
                <p class="l">6</p>
                <div class="c">
                    <img class="c-pic" src="https://img.d1xz.net/d/2022/04/625ec6337d3b9.png" alt="" />
                    <div class="c-info">
                        <p class="c-title">车祸模拟器</p>
                        <span class="c-score">9.2</span>
                    </div>
                </div>
                <div class="btn">启动</div>
            </a>
            <a href="游戏详情.html" class="ranking-content__list">
                <p class="l">7</p>
                <div class="c">
                    <img class="c-pic" src="https://img.d1xz.net/d/2022/04/625ec6337d3b9.png" alt="" />
                    <div class="c-info">
                        <p class="c-title">车祸模拟器</p>
                        <span class="c-score">9.2</span>
                    </div>
                </div>
                <div class="btn">启动</div>
            </a>
        </div>
        <p class="m-loading" id="rankingListMore"><span>加载中...</span></p>
    </div>

 

js

// 排行列表-滚动加载
    isRankingList() {
        let rList = $("#rankingList"); //列表 
        if (!rList.length) return false;
        let ajaxLock = 1; //ajax锁
        let rListMore = $("#rankingListMore"); //加载更多
        let thisPage = rList.data('page') + 1 || '2'; //第1页默认输出,所以从2开始 
        let limit = rList.data('limit') || "7"; //条数,默认50条
        //自定义属性所有的参数
        // let parm = rList.data(); 
        // parm.page = (parm.page+1)*1 ||"2"; //第1页默认输出,所以从2开始 
        let url = null;
        let parm_data = null;
        if (rList.find('a').length < 7) { //判断列表长度小于50时
            rListMore.html('———— 到底了哦 ————');
        } else {
            //滚动到底部
            $(window).scroll(function () {
                let windowH = $(window).height(); //设备可见区域高度
                let documentH = $(document).height(); //整个网页的高度(包括未显示的部分)
                let scrollH = $(window).scrollTop(); //滚动条滚动上去的高度
                if (windowH + scrollH + 60 >= documentH) {
                    if (!ajaxLock) return;
                    ajaxLock = 0;
                    url = 'http://toolapi2.dev.txsdk.com/chaqijia/v1/config/all.html';
                    parm_data = {
                        page: thisPage,
                        limit: limit,
                    }
                    $.ajax({
                        url: url,
                        data: parm_data,
                        type: 'get',
                        success: function (res) {
                            // 自定义res.data假数据
                            res.data = [{
                                    id: 1000,
                                    sort: 8,
                                    pic: 'https://img.d1xz.net/d/2022/04/625ec6337d3b9.png',
                                    title: '闪玩',
                                    fen: '9.9'
                                },
                                {
                                    id: 1001,
                                    sort: 9,
                                    pic: 'https://img.d1xz.net/d/2022/04/625ec6337d3b9.png',
                                    title: '游戏百变',
                                    fen: '9.2'
                                },
                                {
                                    id: 1002,
                                    sort: 10,
                                    pic: 'https://img.d1xz.net/d/2022/04/625ec6337d3b9.png',
                                    title: '游戏百变',
                                    fen: '9.1'
                                },
                                {
                                    id: 1003,
                                    sort: 11,
                                    pic: 'https://img.d1xz.net/d/2022/04/625ec6337d3b9.png',
                                    title: '游戏百变11',
                                    fen: '9.1'
                                },
                                {
                                    id: 1004,
                                    sort: 12,
                                    pic: 'https://img.d1xz.net/d/2022/04/625ec6337d3b9.png',
                                    title: '游戏百变12',
                                    fen: '9.4'
                                },
                                {
                                    id: 1005,
                                    sort: 13,
                                    pic: 'https://img.d1xz.net/d/2022/04/625ec6337d3b9.png',
                                    title: '游戏百变13',
                                    fen: '9.6'
                                },
                                {
                                    id: 1006,
                                    sort: 14,
                                    pic: 'https://img.d1xz.net/d/2022/04/625ec6337d3b9.png',
                                    title: '游戏百变14',
                                    fen: '9.3'
                                }
                            ]
                            if (res.data.length >= limit) {
                                let rhtml = ''
                                ajaxLock = 1;
                                let arrData = res.data;
                                console.log("arrData", arrData)
                                for (var i = 0; i < arrData.length; i++) {
                                    rhtml = `<a href="游戏详情.html" class="ranking-content__list">
                                    <p class="l">${arrData[i]['sort']}</p>
                                    <div class="c">
                                        <img class="c-pic" src="${arrData[i]['pic']}" alt="${arrData[i]['title']}" />
                                        <div class="c-info">
                                            <p class="c-title">${arrData[i]['title']}</p>
                                            <span class="c-score">${arrData[i]['fen']}</span>
                                        </div>
                                    </div>
                                    <div class="btn">启动</div>
                                </a>`
                                    rList.append(rhtml);
                                    thisPage++;
                                    rListMore.html("<span>加载中....</span>");
                                }
                            } else {
                                rListMore.html('———— 到底了哦 ————');
                            }
                        }
                    });
                };
            });
        }
    },

 

标签:sort,滚动,title,fen,列表,let,data,9.2,加载
来源: https://www.cnblogs.com/ada66/p/16170985.html