微信小程序实现简易table效果

最新推荐文章于 2024-05-30 21:45:00 发布

KAGHQ

最新推荐文章于 2024-05-30 21:45:00 发布

阅读量869

点赞数 1

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

本文链接：https://blog.csdn.net/lrqqhm/article/details/137746321

版权

.wxml

<view class="table-container">
  <scroll-view class="table-scroll" scroll-x>
    <view class="table-wrapper">
      <view class="header-wrapper">
        <view class="header">
        <text class="cell">列1</text>
      <text class="cell">列2</text>
      <text class="cell">列3</text>
      <text class="cell">列4</text>
      <text class="cell">列5</text>
      <text class="cell">列6</text>
      <text class="cell">列7</text>
      <text class="cell">列8</text>
      <text class="cell">列9</text>
      <text class="cell">列10</text>
      <text class="cell">列11</text>
      </view>
      </view>
     
      <view class="content-wrapper">
      <scroll-view class="content" scroll-x scroll-y>
     
    <view class="row">
     <text class="cell">行1列1</text>
      <text class="cell">行1列2</text>
      <text class="cell">行1列3</text>
      <text class="cell">行1列4</text>
      <text class="cell">行1列5</text>
      <text class="cell">行1列6</text>
      <text class="cell">行1列7</text>
      <text class="cell">行1列8</text>
      <text class="cell">行1列9</text>
      <text class="cell">行1列10</text>
      <text class="cell">行1列11</text>
    </view>
    <view class="row">
     <text class="cell">行2列1</text>
      <text class="cell">行2列2</text>
      <text class="cell">行2列3</text>
      <text class="cell">行2列4</text>
      <text class="cell">行2列5</text>
      <text class="cell">行2列6</text>
      <text class="cell">行2列7</text>
      <text class="cell">行2列8</text>
      <text class="cell">行2列9</text>
      <text class="cell">行2列10</text>
      <text class="cell">行2列11</text>
    </view>
    <view class="row">
     <text class="cell">行3列1</text>
      <text class="cell">行3列2</text>
      <text class="cell">行3列3</text>
      <text class="cell">行3列4</text>
      <text class="cell">行3列5</text>
      <text class="cell">行3列6</text>
      <text class="cell">行3列7</text>
      <text class="cell">行3列8</text>
      <text class="cell">行3列9</text>
      <text class="cell">行3列10</text>
      <text class="cell">行3列11</text>
    </view>
    <view class="row">
     <text class="cell">行4列1</text>
      <text class="cell">行4列2</text>
      <text class="cell">行4列3</text>
      <text class="cell">行4列4</text>
      <text class="cell">行4列5</text>
      <text class="cell">行4列6</text>
      <text class="cell">行4列7</text>
      <text class="cell">行4列8</text>
      <text class="cell">行4列9</text>
      <text class="cell">行4列10</text>
      <text class="cell">行4列11</text>
    </view>
      </scroll-view>
    </view>
    </view>
  </scroll-view>
</view>

.wxss

实现表格表头固定表格内容随着表头可以滑动并且可以根据设定的内容高度300rpx实现滑动请求

.table-container {
  height: 400rpx; /* 表格容器高度 */
  overflow: hidden; /* 隐藏超出容器高度的内容 */
}

.table-scroll {
  width: 100%;
  height: 100%;
}

.table-wrapper {
  display: flex;
  flex-direction: column;
  /* 最小宽度是内容的最大适应宽度 */
  min-width: max-content;
}

.header-wrapper {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #f5f5f5;
  border-bottom: 1rpx solid #ccc;
}

.header {
  display: flex;
}

.content {
  flex-grow: 1;
  height: 300rpx;
}

.row {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #ccc;
}

.cell {
  flex: 1;
  padding: 10rpx;
  text-align: center;
}