微信小程序原生实现table组件, 第二弹，支持横向和纵向滚动（固定列，可设置边框）

最新推荐文章于 2025-07-01 16:16:59 发布

没脾气的猫

最新推荐文章于 2025-07-01 16:16:59 发布

阅读量2.2k

点赞数 11

CC 4.0 BY-SA版权

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/badoldboy/article/details/136045562

效果图

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/5e6cb1a645584c9dbf27b6bd1ab9465e.png

table组件代码

wxml文件

<!-- 表格 -->
<view class="table">
  <scroll-view
    enable-flex
    scroll-y
    scroll-x
    style="height:{
   
   {height}}rpx; flex-direction: row;"
    bindscrolltolower="handleScrollToLower"
    class="{
   
   {border && 'table-container'}}"
  >
    <view style="width:{
   
   {width}}rpx">
      <!-- 表头 -->
      <view class="tr-th">
        <view
          wx:for="{
   
   {columns}}"
          wx:for-item="column"
          wx:key="index"
          style="width:{
   
   {column.width || 200}}rpx"
          class="{
   
   {border && 'th-border'}} th"
          >{
   
   {
   
   column.title}}
        </view>
      </view>
      <!-- 内容 -->
      <!-- 除表头外纵向滑动 -->
      <view class="tr" wx:for="{
   
   {tableData}}" wx:for-item="table" wx:key="index">
        <view
          style="width:{
   
   {columnItem.width || 200}}rpx"
          class="{
   
   {border && 'td-border'}} td"
          wx:for="{
   
   {columns}}"
          wx:for-item="columnItem"
          wx:for-index="columnIndex"
          wx:key="columnIndex"
        >
          {
   
   {
   
    table[columnItem.key] || '-'}}
        </view>
      </view>
    </view>
  </scroll-view>
</view>

wxss文件


/* 项目表格 */
.table {
   
   
  position: relative;
  background: #FFFFFF;
  box-shadow: 0px 0px 10rpx 0px rgba(32,76,131,0.12);
  border-radius: 20rpx ;
  box-sizing: border-box;
  padding: 40rpx 0rpx 0rpx 20rpx;
}
.table-container {
   
   
  border: 1px solid #DBDBDB;
  border-bottom: none;
}
.tr {
   
   
  display: flex;
}

.tr-th {
   
   
  display: flex;
  position: sticky;
  top: 0;
  z-index: 99;
  background: #fafafa;
}
.th{
   
   
  padding: 10rpx;
  border-bottom: 1px solid #