要实现一个移动端的table表格，并且有上拉
加载，下拉刷新的功能，你可以使用H5的一些特性，例如`<table>`标签、`<
div>`标签、`<
ul>`标签、`<li>`标签、CSS3动画、JavaScript等。
以下是一个使用HTML、CSS、JavaScript实现的示例代码：
HTML：
```html
<!-- table表格容器 -->
<
div id="table-container">
<!-- 下拉刷新提示 -->
<
div class="p
ull-down-refresh">
<span class="loading"></span>下拉刷新
</
div>
<!-- table表格 -->
<table>
<thead>
<
tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</
tr>
</thead>
<tbody id="table-body">
<
tr>
<td>Item 1-1</td>
<td>Item 1-2</td>
<td>Item 1-3</td>
</
tr>
<
tr>
<td>Item 2-1</td>
<td>Item 2-2</td>
<td>Item 2-3</td>
</
tr>
<
tr>
<td>Item 3-1</td>
<td>Item 3-2</td>
<td>Item 3-3</td>
</
tr>
<!-- 省略更多的表格行 -->
</tbody>
</table>
<!-- 上拉
加载提示 -->
<
div class="p
ull-up-load">
<span class="loading"></span>上拉
加载
</
div>
</
div>
```
CSS：
```css
/* table表格容器样式 */
#table-container {
height: 100%;
overflow-y: auto;
}
/* 下拉刷新提示样式 */
.p
ull-down-refresh {
height: 50px;
line-height: 50px;
text-align: center;
font-size: 14px;
color: #888;
position: relative;
}
.p
ull-down-refresh .loading {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 50%;
border: 2px solid #ccc;
border-top-color: #07c160;
animation: rotate 0.6s linear infinite;
position: absolute;
left: 50%;
top: 50%;
transform:
translate(-50%, -50%);
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
/* 上拉
加载提示样式 */
.p
ull-up-load {
height: 50px;
line-height: 50px;
text-align: center;
font-size: 14px;
color: #888;
position: relative;
}
.p
ull-up-load .loading {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 50%;
border: 2px solid #ccc;
border-top-color: #07c160;
animation: rotate 0.6s linear infinite;
position: absolute;
left: 50%;
top: 50%;
transform:
translate(-50%, -50%);
}
```
JavaScript：
```javascript
// 获取table表格
var table = document.querySelector('table');
// 初始化下拉刷新
var startY = 0; // 记录触摸起始位置
var isP
ullDown = false; // 是否正在下拉刷新
table.addEventListener('touchstart', function(event) {
var touch = event.touches[0];
startY = touch.pageY;
}, false);
table.addEventListener('touchmove', function(event) {
if (isP
ullDown) {
return;
}
var touch = event.touches[0];
var distance = touch.pageY - startY;
if (distance > 0 && table.scrollTop == 0) {
// 下拉刷新
isP
ullDown =
true;
var refresh = document.querySelector('.p
ull-down-refresh');
var loading = refresh.querySelector('.loading');
loading.style.display = 'inline-block';
refresh.innerHTML = '<span class="loading"></span>正在刷新';
// 模拟
加载数据
setTimeout(function() {
// 插入新的表格行
var tbody = document.querySelector('#table-body');
var
tr = document.createElement('
tr');
tr.innerHTML = '<td>New Item 1</td><td>New Item 2</td><td>New Item 3</td>';
tbody.insertBefore(
tr, tbody.firstChild);
// 结束下拉刷新
loading.style.display = 'none';
refresh.innerHTML = '<span class="loading"></span>下拉刷新';
isP
ullDown = false;
}, 1000);
}
}, false);
// 初始化上拉
加载
var isP
ullUp = false; // 是否正在上拉
加载
table.addEventListener('scroll', function(event) {
var tbody = document.querySelector('#table-body');
var height = tbody.offsetHeight;
var top = table.scrollTop;
var clientHeight = table.clientHeight;
if (height - top - clientHeight < 50 && !isP
ullUp) {
// 上拉
加载
isP
ullUp =
true;
var load = document.querySelector('.p
ull-up-load');
var loading = load.querySelector('.loading');
loading.style.display = 'inline-block';
load.innerHTML = '<span class="loading"></span>正在
加载';
// 模拟
加载数据
setTimeout(function() {
// 插入新的表格行
var
tr = document.createElement('
tr');
tr.innerHTML = '<td>New Item 1</td><td>New Item 2</td><td>New Item 3</td>';
tbody.appendChild(
tr);
// 结束上拉
加载
loading.style.display = 'none';
load.innerHTML = '<span class="loading"></span>上拉
加载';
isP
ullUp = false;
}, 1000);
}
}, false);
```
注意：这只是一个简单的示例代码，实际情况可能需要更复杂的代码来满足需求。另外，上拉
加载和下拉刷新功能需要与后端API接口配合使用。
最低0.47元/天 解锁文章
3430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
