uniapp表格如何设置超出滑动
时间: 2023-08-11 15:03:41 浏览: 145
在uniapp中,可以使用`<scroll-view>`标签来实现表格超出滑动的效果。具体实现步骤如下:
1. 在页面中添加`<scroll-view>`标签,设置其样式和高度,例如:
```html
<scroll-view class="table-wrapper" style="height: 200px;">
<!-- 在这里添加表格内容 -->
</scroll-view>
```
2. 在`<scroll-view>`标签内部添加表格内容,例如:
```html
<scroll-view class="table-wrapper" style="height: 200px;">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<!-- 其他表格行 -->
</table>
</scroll-view>
```
3. 在样式中设置`<scroll-view>`标签的滚动条样式和位置,例如:
```css
.table-wrapper::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.table-wrapper::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #c8c8c8;
}
.table-wrapper::-webkit-scrollbar-track {
border-radius: 3px;
background-color: #f5f5f5;
}
```
通过以上步骤,就可以实现uniapp表格超出滑动的效果了。
阅读全文
相关推荐















