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

快来打我* 2022-12-27 08:27 93阅读 0赞

引入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));
        }