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

.wxml
cpp 复制代码
<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实现滑动请求
cpp 复制代码
.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;
}
相关推荐
文心快码BaiduComate5 小时前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子3 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918413 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张3 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差3 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI3 天前
【小程序】微信小程序隐私协议
微信小程序·小程序