分页渲染"/>
案例 分页渲染
一、把鼠标变成小手：cursor:pointer；
二、分析：
1、分页实现的逻辑：就是从原始数组中截取一个新的数组，用这个新的数组进行渲染；
截取数组的时候不可以改变新数组，所以我们需要用slice的方法
2、第一步：当我们页面一打开
->我们需要截取一个数组，并组成一个新的数组，且还不影响原数组
->里面的数据是根据当前页和当前页的数量进行计算的
->使用截取出来的数据渲染我们的页面
->根据当前页或者是下一页判断是否需要disabled类名
->根据当前页的数量，去判断我们有多少页
第二步：点击下一步按钮时
->我们需要把当前页面的数字更换为下一页数字
->重新截取一组数据
->使用截取的数据重新渲染页面
->根据当前页判断上一页或者下一页是否需要disabled
->根据当前页的数量，去判断我们有多少页
第三步：点击上一步按钮时
->我们需要把当前页面的数字更换为上一页的数字
->重新截取一组数据
->使用截取的数据重新渲染页面
->根据当前页判断上一页或者下一页是否需要disabled
->根据当前页的数量，去判断我们有多少页
第四步：当我们点击选择有多少条的时候
->需要把显示的条数显示出来
->需要重新截取一组数据
->使用截取的数据重新渲染页面
->根据当前页判断上一页或者下一页是否需要disabled
->根据当前页的数量，去判断我们有多少页
综上可得：我们一直在重复执行一段代码，这些可以进行封装，在使用的时候进行调用；
3、简化可得：
第一步：页面一打开，调用一次函数；
第二步：点击下一步按钮，调用一次函数；
第三步：点击上一步按钮，调用一次函数；
第四步：点击选择数量，调用一次函数；
4、我们需要两个变量，一个表示页（current） 一个表示一页有多少条(pagesize)；
5、按照规律获取截取数组的开始索引和结束索引
[(current - 1) * pagesize] - [current * pagesize - 1]
6、截取数组：使用slice的时候我们需要注意，这个是包前不包后的，所以我们需要把截取的索引+1，才可以得到我们想要截取到的数据==[(current - 1) * pagesize] - [current * pagesize ]；
7、开始准备前端代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}ul,li {list-style: none;}.header,.footer,.content {width: 1200px;margin: 0 auto;}.header,.footer {display: flex;justify-content: center;align-items: center;background-color: skyblue;color: #fff;}.header {font-size: 30px;height: 80px;}.footer {font-size: 100px;height: 300px;}.content {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 10px auto;}.content>li {border: 1px solid #333;width: 280px;margin-bottom: 10px;}li>img {width: 100%;height: 350px;}li>p {padding: 2px 10px;}.pagination {width: 1200px;height: 40px;margin: 0 auto;display: flex;align-items: center;}.pagination>span {padding: 5px 10px;background-color: skyblue;color: #fff;font-size: 20px;cursor: pointer;}/*span.disable需要同时满足 标签名是 span 并且 类名是 disable*/.pagination>span.disable {background-color: #ccc;cursor: not-allowed;}.pagination>p {font-size: 20px;margin: 0 20px;}.pagination>select {padding: 3px 10px 3px 20px;font-size: 20px;margin-left: 20px;}</style>
</head><body><div class="header">网页头部</div><div class="pagination"><span class="prev disable"><</span><p class="total"> 1 / 10 </p><span class="next ">></span><select><option value="4">4</option><option value="6">6</option><option value="8">8</option><option value="12">12</option></select></div><ul class="content"><!-- <li><img src="" alt=""><p>2020西太湖国际音乐节</p><p>城市: 常州</p><p>地址: 常州西太湖中国花卉博览景区北门</p><p>价格: 199-399</p><p>演出时间: 2020.09.19-09.20</p></li> --></ul><div class="footer">网页底部</div><script src="./dm_list.js"></script><script>此段代码在下一部分</script>
</body>
</html>8、补充JS部分代码
// 获取页面的元素var ulbox = document.querySelector('ul')var prevbox = document.querySelector('.prev')var nextbox = document.querySelector('.next')var totalBox = document.querySelector('.total')var selectBox = document.querySelector('select')// 设置页数和一页有多少个的变量,假设一页4个var current = 1;var pagesize =4;// 打开页面需要优先执行一次bindHtml()// 函数的封装function bindHtml(){// 先有一个新的数组存放截取的数据var bindList = list.slice([current - 1]*pagesize,current*pagesize)// 准备一个空字符串，接收数据，便于渲染页面var str = ''// 遍历数组，进行截取数据bindList.forEach(function(item){str += `<li><img src="${item.pic}" alt=""><p>${item.name}</p><p>城市: ${item.city}</p><p>地址: ${item.address}</p><p>价格: ${item.price}</p><p>演出时间: ${item.showtime}</p></li> `})// 进行页面渲染ulbox.innerHTML = str// 这里需要计算我们总共多少条，一页多少条,注意取整问题total = Math.ceil(list.length / pagesize)// 把这个数据渲染到页面上,显示当前页和总共页数totalBox.innerHTML = current + '/' +total// 判断上一页是否需要disableif(current === 1){prevbox.className = 'prev disable'}else{prevbox.className = 'prev'}// 也可以修改为三目// prevbox.className = current ===1 ? 'prev disable' : 'prev'// 判断下一页是否需要disablenextbox.className = current ===total ? 'next disable' : 'next'}// 点击上一步按钮，调用一次函数prevbox.onclick = function(){// 这里需要进行判断，一定不用点击的情况if(current === 1) returncurrent--bindHtml()}// 点击下一步按钮，调用一次函数nextbox.onclick = function(){if(current === total) returncurrent++bindHtml()}// 点击选择数量，调用一次函数selectBox.onchange = function(){pagesize = selectBox.value - 0current = 1bindHtml()}更多推荐
案例 分页渲染
发布评论