html 原生滚动分页列表
以下是一个基本的 HTML 原生滚动分页列表：
<!DOCTYPE html>
<html>
<head>
<title>Scroll Pagination List</title>
<style>
#list_container {
height: 300px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
}
.list_item {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #eee;
background-color: #f9f9f9;
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.pagination button {
font-size: 14px;
padding: 6px 12px;
margin: 0 5px;
border: 1px solid #ccc;
background-color: #fff;
cursor: pointer;
}
.pagination button.active {
background-color: #007bff;
color: #fff;
border-color: #007bff;
}
</style>
</head>
<body>
<div id="list_container"></div>
<div class="pagination"></div>
<script>
// 数据
var data = [
{title: 'Item 1'},
{title: 'Item 2'},
{title: 'Item 3'},
{title: 'Item 4'},
{title: 'Item 5'},
{title: 'Item 6'},
{title: 'Item 7'},
{title: 'Item 8'},
{title: 'Item 9'},
{title: 'Item 10'},
{title: 'Item 11'},
{title: 'Item 12'},
{title: 'Item 13'},
{title: 'Item 14'},
{title: 'Item 15'},
{title: 'Item 16'},
{title: 'Item 17'},
{title: 'Item 18'},
{title: 'Item 19'},
{title: 'Item 20'}
];
// 页面设置
var items_per_page = 5;
var current_page = 1;
// 渲染列表项
function renderList() {
var list_container = document.getElementById('list_container');
list_container.innerHTML = '';
var start_index = (current_page - 1) * items_per_page;
var end_index = start_index + items_per_page;
for (var i = start_index; i < end_index; i++) {
if (data[i]) {
var item = document.createElement('div');
item.className = 'list_item';
item.innerHTML = data[i].title;
list_container.appendChild(item);
}
}
}
// 渲染分页按钮
function renderPagination() {
var pagination = document.querySelector('.pagination');
pagination.innerHTML = '';
var total_pages = Math.ceil(data.length / items_per_page);
for (var i = 1; i <= total_pages; i++) {
var button = document.createElement('button');
button.innerHTML = i;
if (i === current_page) {
button.className = 'active';
}
button.addEventListener('click', function() {
current_page = parseInt(this.innerHTML);
renderList();
renderPagination();
});
pagination.appendChild(button);
}
}
// 初始化
renderList();
renderPagination();
</script>
</body>
</html>
这个例子包括一个数据数组、页面设置、渲染列表项和渲染分页按钮的函数。它使用原生的 HTML 滚动，设置了容器高度和 overflow-y 样式来控制滚动。分页按钮使用 flex 布局和 JavaScript 事件监听器来响应用户点击
原文地址: https://www.cveoy.top/t/topic/hjaW 著作权归作者所有。请勿转载和采集!