在vue里使用ul和li标签展示数据,要求有左右箭头可以上一页下一页并且带有基本css样式, 完成分页功能,分页使用原生js实现
时间: 2024-03-16 07:43:40 浏览: 32
好的,我可以帮你解决这个问题。首先,你需要确定以下几点:
1. 数据来源:你需要从哪里获取数据?
2. 每页显示的数据量:你想要每页显示多少条数据?
3. 总数据量:你的数据总共有多少条?
4. 分页样式:你需要定义分页的样式,比如上一页、下一页、页码等等。
对于第一个问题,假设你已经从后端获取到了数据,数据存储在一个数组中。
对于第二个和第三个问题,我们可以先根据每页显示的数据量算出总页数。
```javascript
const pageSize = 10; //每页显示10条数据
const data = [/* 数据数组 */];
const totalPages = Math.ceil(data.length / pageSize); //总页数
```
接下来,我们可以创建一个函数来渲染分页按钮和数据列表。
```html
<!-- HTML模板 -->
<ul class="pagination">
<li class="prev">上一页</li>
<li class="next">下一页</li>
</ul>
<ul class="data-list">
<!-- 数据列表 -->
</ul>
```
```javascript
// 渲染函数
function render(page) {
// 获取数据
const start = (page - 1) * pageSize;
const end = start + pageSize;
const pageData = data.slice(start, end);
// 渲染数据列表
const dataList = document.querySelector('.data-list');
dataList.innerHTML = '';
pageData.forEach(item => {
const li = document.createElement('li');
li.innerText = item;
dataList.appendChild(li);
});
// 渲染分页按钮
const pagination = document.querySelector('.pagination');
pagination.innerHTML = '';
const prevLi = document.createElement('li');
prevLi.innerText = '上一页';
prevLi.addEventListener('click', () => {
if (page > 1) {
render(page - 1);
}
});
pagination.appendChild(prevLi);
for (let i = 1; i <= totalPages; i++) {
const li = document.createElement('li');
li.innerText = i;
if (i === page) {
li.classList.add('active');
}
li.addEventListener('click', () => {
render(i);
});
pagination.appendChild(li);
}
const nextLi = document.createElement('li');
nextLi.innerText = '下一页';
nextLi.addEventListener('click', () => {
if (page < totalPages) {
render(page + 1);
}
});
pagination.appendChild(nextLi);
}
```
最后,我们可以在页面加载完成后调用 `render` 函数来渲染初始页面。
```javascript
// 页面加载完成后调用
window.addEventListener('load', () => {
render(1); //默认渲染第一页
});
```
至此,一个基本的带分页功能的数据展示页面就完成了。你可以根据自己的需求来修改样式和逻辑。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)