Flask新媒体网站列表前台实现

今天药忘吃喽~ 2022-01-20 05:33 304阅读 0赞

*  在 `index.js` 文件中，实现 `updateNewsData` 方法

function updateNewsData() {
        var params = {
            "page": 1,
            "cid": currentCid,
            'per_page': 50
        }
        $.get("/newslist", params, function (resp) {
            if (resp) {
                // 先清空原有数据
                $(".list_con").html('')
                // 显示数据
                for (var i=0;i<resp.newsList.length;i++) {
                    var news = resp.newsList[i]
                    var content = '<li>'
                    content += '<a href="#" class="news_pic fl"><img src="' + news.index_image_url + '?imageView2/1/w/170/h/170"></a>'
                    content += '<a href="#" class="news_title fl">' + news.title + '</a>'
                    content += '<a href="#" class="news_detail fl">' + news.digest + '</a>'
                    content += '<div class="author_info fl">'
                    content += '<div class="source fl">来源：' + news.source + '</div>'
                    content += '<div class="time fl">' + news.create_time + '</div>'
                    content += '</div>'
                    content += '</li>'
                    $(".list_con").append(content)
                }
            }
        })
    }

*  并在界面加载完成之后，首次加载新闻列表数据

$(function () {
        // 首次进入，去加载新闻列表数据
        updateNewsData()
        ...
    })

> 运行测试，新闻数据正常展示

*  实现分页效果-No.1

//页面滚动加载相关
    $(window).scroll(function () {
        // 浏览器窗口高度
        var showHeight = $(window).height();
        // 整个网页的高度
        var pageHeight = $(document).height();
        // 页面可以滚动的距离
        var canScrollHeight = pageHeight - showHeight;
        // 页面滚动了多少,这个是随着页面滚动实时变化的
        var nowScroll = $(document).scrollTop();
        if ((canScrollHeight - nowScroll) < 100) {
            if (!house_data_querying) {
                // 将`是否正在向后端查询新闻数据`的标志设置为真
                house_data_querying = true;
                // 如果当前页面数还没到达总页数
                if(cur_page < total_page) {
                    // 向后端发送请求，查询下一页新闻数据
                    updateNewsData();
                } else {
                    house_data_querying = false;
                }
            }
        }
    })

*  实现分页效果-No.2

function updateNewsData() {
        var params = {
            "page": cur_page,
            "cid": currentCid,
            'per_page': 50
        }
        $.get("/newslist", params, function (resp) {
            // 设置 `数据正在查询数据` 变量为 false，以便下次上拉加载
            data_querying = false
            if (resp) {
                // 记录总页数
                total_page = resp.totalPage
                // 如果当前页数为1，则清空原有数据
                if (cur_page == 1) {
                    $(".list_con").html('')
                }
                // 当前页数递增
                cur_page += 1
                for (var i=0;i<resp.newsList.length;i++) {
                    ...
                }
            }
        })
    }

> 运行测试

*  实现切换分类刷新逻辑

// 首页分类切换
    $('.menu li').click(function () {
        var clickCid = $(this).attr('data-cid')
        $('.menu li').each(function () {
            $(this).removeClass('active')
        })
        $(this).addClass('active')
    
        if (clickCid != currentCid) {
            // 去加载数据
            // 记录当前分类id
            currentCid = clickCid
    
            // 重置分页参数
            cur_page = 1
            total_page = 1
            data_querying = false
            updateNewsData()
        }
    })