require(["ipuUI", "jquery"], function (ipuUI, $) { $.sizeReady(function () { // 清空搜索栏 $(".notice-search-remove").click(function () { $(".notice-search input").val(''); }) // 下滑刷新 var pageNo = 0; // 查询页数,查询前有做++处理,第一次查询时值为1 var pageSize = 10; // 每页数据多少条 var queryNo = 0; // 查询编号计数器(重要) // 模拟用代码开始,正式代码没有这段 var totalPage = 3; // 总页数,可修改total为0,查看没有数据时的展示 var listObj = $(".notice-list"); var contentHtml = $(".notice-item:lt(" + pageSize + ")", listObj).clone(); // 测试用,复制10条数据 listObj.empty(); // 移除初始的数据 // 模拟用代码结束 // 初始化下拉刷新,若组件不是因为加载数据时发生内容变化,需要调用组件的refresh()方法刷新,否则可能导致内容滚动不正常 var myRefresh = ipuUI.refresh("#refresh", { bottomLoadFun: function () { // 加载更多 console.log('加载更多'); // 手势按住上移,内容往上翻动 loadData(); } }); // 加载数据 function loadData(refresh) { // refresh:true表示是刷新加载,false或没有值表示是底部加载 var localQueryNo = ++queryNo; // 记录当前查询计数器 $('.no-result-msg').hide(); // 隐藏没有数据的提示 setTimeout(function () { // 模拟延时加载 pageNo++; // 更新查询页数 if (localQueryNo == queryNo) { // 检查查询计数器是否变化,变化则表示当前查询是历史查询,不用处理(变成历史查询一般是因为发生了刷新操作或用户手操作执行了新的查询) myRefresh.enableBottom(pageNo < totalPage); // 是否有一下页数据,若返回结果没有总数,条件可变更为判断返回数据长度是否等于pageSize if (totalPage == 0) { // 是否有数据返回,若返回结果没有总数,条件可变更为判断是否为第一页且返回数据长度为0或没有数据结果返回 $('.no-result-msg').show(); // 未返回显示没有数据的提示 } else { if (refresh) { // 刷新操作需要清空已有内容 listObj.empty(); } contentHtml.clone().appendTo(listObj); // 添加新的数据 } myRefresh.endLoading(); //最后调用,结束加载画面 } // 进入意见反馈详情页 $(".notice-item").click(function () { // location.href = "notice-detail.html"; }); }, 1000); } }); });