js使用mescroll下拉刷新和页面传参

本文介绍如何使用mescroll.js实现上下拉加载功能。通过具体示例代码展示了配置mescroll.js并结合Ajax请求动态加载数据的过程。文章涵盖初始化插件、设置回调函数及数据处理等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

引入mescroll.js
 <script type="text/javascript" src="./js/mescroll.m.js"></script>
//插件有详细的配置参数这里我就不多介绍了
//这里结构父盒子的id="mescroll"所以下面设置使用mescroll,可以随便设置
var mescroll = new MeScroll("mescroll",{ 
          up:{
            callback: upCallback, //上拉加载的回调
            empty: {
						tip: "暂无相关数据~" //提示
            },
			noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;			
            
          }
    });
    
    let dataList = []; //新建一个空数组来存放数据
    function upCallback(page) {
        var pageNum = page.num-1; // 页码, 默认从1开始 如何修改从0开始 ?
        var pageSize = page.size; // 页长, 默认每页10条
        $.ajax({
            url: url+'api/comm/msg?page='+pageNum+'&size='+pageSize+'&published=true',
            type: 'GET',
            accept: 'application/json;charset=UTF-8',
            async: false,
            data: {},
            headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}`, 'Working-Organization': 1 },
            dataType: 'JSON',
            success: function (msg) { 
                var data = msg.data;
                var selection = "";
                var totalPage=data.totalRecords;
                if(page.num == 1) {dataList = [];} //如果是第一页需手动置空列表
                dataList = dataList.concat(data); //追加新数据
                
                var dataObject={}; //新建一个对象
                for (var i = 0; i < dataList.length; i++) {
                    var dataId=dataList[i].id;//用数据的id进行查询
                    dataObject[dataId]=dataList[i].content;
                    selection += `<li style="padding:0rem;height:auto" class="item opacity" data-id="${dataList[i].id}" data-title="${dataList[i].title}">
                    <div class="publishTime">${dataList[i].publishTime}</div>
                    <img class="ListImg" src="./images/hotspot3.png" alt=""><div class="textTitle">${dataList[i].title}</div>
                    <p class="txt">${dataList[i].description}</p></li>`
                }
                setData(dataObject,'DataListMenu');
                //设置列表数据
                $('#newsList').html(selection);
                $('#mescroll li').click(function () {
                    var fileid = $(this).attr("data-id")
                    var filetitle = $(this).attr("data-title");
                    var link =htmlUrl("/details.html?id=" + fileid + "&title="+filetitle);
                     forward(link)
                });

                mescroll.endByPage(data.length, totalPage);
            },
            error: function(e){
                mescroll.endErr();
            }
        })
    };
    function setData(a,menu){ //把数据存储到本地缓存
        localStorage.setItem(menu,JSON.stringify(a));
    }    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值