近期对公司网站进行修改,新增需求:知识库模块。其中涉及到一个小功能分页,为了提高自己的代码自编写力,决定原生编写。此次功能使用Jq操作dom的方式去完成编码,代码实现的有点小鸡肋,也基本到达了需求的效果。
Html部分
<ul id="Article">
</ul>
<div class="page">
<span class="pre" style="display: none;"><</span>
<p class="pagesize">
<!-- 动态渲染按钮 -->
</p>
<span class="next">></span>
</div>
Javascript部分
/*
* id 标识
* title 标题
* time 时间
* tag 标签
* img 图片
* describe 描述
* href 链接地址
*/
let arr = [{
id: 1,
title: '大屏不会做很迷茫,3分钟为您指路引航',
time: '2020/07/29',
tag: '可视化大屏',
img: 'img/jslt/tu1.png',
href: 'ArticleNO2.html',
describe: '大屏首先是要服务于 […]'
}];
// 默认显示页数
const pageSize = 3;
// 一页显示*条
const pageLength = 3;
// 数组动态划分页数总数(总页数)
let pageNum = 0;
//新数组存放
let newList = [];
// 记录当前页
let current = 1;
随机文章数组
这里暂时使用random函数对数组进行微处理,等接口对接后进行更改。
for (var i = 0; i < 10; i++) {
let rand = Math.floor(Math.random()*5);
arr.push(arr[rand]);
}
文章渲染
默认渲染第一页的内容,使用slice对总文章数组进行分割,减缓浏览器压力,减少渲染。
function draw(list) {
var html = list.map((item) => {
let value;
//对无图片进行处理
if (item.img) {
value = `<img src="${item.img}" />`;
} else {
value = `<span class="date">${item.time}</span>`;
}
return `<li>
<a href="${item.href}" title="${item.title}">
<div class="tu">${value}</div>
<p class="tiaoti">${item.title}</p>
<p class="time">发布时间:${item.time} Tag:${item.tag}</p>
<p class="cont">${item.describe}</p>
</a>
</li>`
}).join('');
//更新dom
document.querySelector('#Article').innerHTML = html;
}
//渲染第一页
draw(arr.slice(0, pageLength));
按钮渲染
根据数组长度处理,pageLength为一页显示的条数,pageNum为总页数,pageSize为按钮的数量。
// 渲染btn
function drawbtn() {
var html = '';
//计算出总页数
pageNum = Math.round((arr.length + 1) / pageLength);
for (let i = 1; i <= pageNum; i++) {
//控制按钮数量
if (i > pageSize) break;
i == 1 ? html += `<span class="pageBtn pageLight">${i}</span>` : html += `<span class="pageBtn">${i}</span>`;
}
document.querySelector('.pagesize').innerHTML = html;
}
drawbtn();
绑定事件
对不同的按钮事件进行绑定,按钮点击高亮类赋值。
当前按钮的值*页显示数-页显示数量 = 文章数组的开始截取位置
// 单点数字页面
$('.page .pageBtn').each(function() {
let index = $(this).text();
$(this).click(() => {
// 记录数组位置
let end = index * pageLength;
current = index;
newList = arr.slice(end - pageLength, end);
// 高亮显示
$(this).addClass('pageLight').siblings().removeClass('pageLight');
//前进后退按钮的显示
if (current != 1) $('.pre').css('display', 'block');
if (current != pageNum) $('.next').css('display', 'block');
//点击渲染文章列表
draw(newList);
})
});
// 上一页
$('.pre').click(function() {
current--;
var first = $('.pageBtn:first-child').text();
if (first > 1) {
$('.pageBtn').each(function() {
var num = $(this).text();
$(this).text(--num);
});
current++;
}
// 高亮显示
$(`.pageBtn:nth-child(${current})`).addClass('pageLight').siblings().removeClass('pageLight');
// 高亮页文本
var currentNum = $(`.pageBtn:nth-child(${current})`).text();
// 边界判断 当前值等于1隐藏按钮
if (currentNum == 1) {
$(this).css('display', 'none');
} else {
$('.next').css('display', 'block');
}
// 文章列表渲染
draw(arr.slice((currentNum * pageLength) - pageLength, currentNum * pageLength));
})
// 下一页
$('.next').click(function() {
current++;
var last = $('.pageBtn:last-child').text();
if (last < pageNum) {
$('.pageBtn').each(function() {
var num = $(this).text();
$(this).text(++num);
});
current--;
}
// 高亮显示
$(`.pageBtn:nth-child(${current})`).addClass('pageLight').siblings().removeClass('pageLight');
// 高亮页文本
var currentNum = $(`.pageBtn:nth-child(${current})`).text();
// 当前值等于最后一页
if (currentNum == pageNum) {
$(this).css('display', 'none');
} else {
$('.pre').css('display', 'block');
}
// 文章列表渲染
draw(arr.slice((currentNum * pageLength) - pageLength, currentNum * pageLength));
})
此笔记仅仅为了记录自己在项目中所学到的知识,如果有问题,可以提出,我们可以共同探讨。