<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="[!--news.url--]skin/listnews/css/listnews.css">
</head>
<body>
<div class="main-list">
<ul id="list">
</ul>
<div class="load-more">
<div class="add-more" style="display: flex">
<i></i>
<span>加载更多</span>
</div>
<div class="add-ing" style="display: none">
<i></i>
<span>加载中...</span>
</div>
</div>
</div>
<script src="[!--news.url--]skin/listnews/js/jquery.min.js"></script>
<script>
(function (win, $) {
$.listnews = {
pageNum: 0,
initLoadMore() {
let _self = this;
$(".load-more").on('click', '.add-more', function () {
$(this).css({ display: 'none' }).siblings('.add-ing').css({ display: 'flex' });
_self.pageNum++;
_self.initGetData(_self.pageNum);
setTimeout(() => {
$(this).css({ display: 'flex' }).siblings('.add-ing').css({ display: 'none' });
}, 1000)
})
},
initGetData(index) {
let _this = this;
$.ajax({
url: '[!--news.url--]e/extend/listnews/?page=' + index + '&pageNum=5&classid=13',
/*
zhuxubai202112
page：分页
pageNum:显示多少数量
classid：栏目ID
*/
type: 'get',
dataType: 'json',
success: function (jsonData) {
var html = '';
if (jsonData.info) {
jsonData.info.forEach(function (val) {
html += `<li class="item">
<a href="${val.titleurl}"><p>${val.title}</p><span class="date">${val.newstime}</span></a>
</li>`;
})
$('#list').append(html);
}
}
})
},
init() {
this.initGetData(this.pageNum);
this.initLoadMore();
}
}
$.listnews.init();
})(window, jQuery)
</script>
</body>
</html>
使用方法：
以上代码为模板文件
附件文件直接覆盖网站目录下即可。
skin文件为附件目录
e/extend/listnews/index.php这个文件为获取内容文件
上传以下附件：
[下载 *.rar](文件大小：32.71 KB,下载次数：129)
|
顶部 
加入收藏夹
2021-12-27 10:05:57 
已设置保密
回复
引用
报告
编辑
删除
