原生微信小程序-编写表格-可横向、纵向拖动

最新推荐文章于 2025-04-09 16:08:36 发布

原创最新推荐文章于 2025-04-09 16:08:36 发布 · 347 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #notepad++ #小程序 #css3

效果：

xml文件：

<!-- 表格 -->
<view class="table">
  <!-- 整体横向滑动 -->
  <scroll-view class="tableX" scroll-x>
    <!-- 表头 -->
    <view class="tr">
      <view
        wx:for="{{columns}}"
        wx:for-item="column"
        wx:key="index"
        style="width:{{column.width || '200rpx'}}"
        class="th"
        >{{column.title}}
      </view>
    </view>
    <!-- 内容 -->
    <!-- 除表头外纵向滑动 -->
    <scroll-view class="tableY" scroll-y>
      <view class="tr" wx:for="{{tableData}}" wx:for-item="table" wx:key="index">
        <view
          style="border-bottom:{{index===tableData.length-1? 'none':'1px solid #DBDBDB'}};width:{{columnItem.width || '200rpx'}}"
          class="{{columnItem.class? 'td '+columnItem.class : 'td' }}"
          wx:for="{{columns}}"
          wx:for-item="columnItem"
          wx:for-index="columnIndex"
          wx:key="columnIndex"
          >{{table[columnItem.key]}}
        </view>
      </view>
    </scroll-view>
  </scroll-view>
</view>

wxss文件：

/* 项目表格 */
.table {
  background: #FFFFFF;
  /* box-shadow: 0px 0px 10rpx 0px rgba(32,76,131,0.12); */
  /* border-radius: 20rpx ; */
  box-sizing: border-box;
  margin: 0 10rpx;
}
.tableY {
  height: 300rpx;
}
.tr, .tableY {
  width: 1500rpx;
}
.tr {
  display: flex;
}
.th{
  padding: 8rpx;
  border: 1px solid rgb(219, 218, 218);
  background-color: rgb(241, 241, 241);
  text-align: center;
  font-weight: bold;
  font-size: 20rpx;
  font-weight: 400;
  color: #000000;
}
.td {
  padding: 8rpx;
  overflow-x: scroll;
  white-space: nowrap;
  border: 1rpx solid rgb(219, 218, 218);
  text-align: center;
  font-size: 18rpx;
  font-weight: 400;
  color: #666666;
  width: 401rpx;
}

js文件：

 data: {
    tableData: [
      {
        MONTH2:"0",
      SITE2:"0",
      TX2:"0",
      WORK_NO:"0", 
      WORK_NAME:"0", 
      TOTAL_SCORE:"0", 
      JF_SOUR:"0",
      ORDER_NO:"0",
      CALL_NO:"0",
      VOICE_NO:"0", 
      REASON:"0",
      CLASS2:"0", 
      SCORE:"0"
      },
    ],
    columns: [
      {title: '***', key: 'MONTH2', width: '400rpx'}, 
      {title: '***', key: 'SITE2', width: '400rpx'}, 
      {title: '***', key: 'TX2', width: '400rpx'}, 
      {title: '***', key: 'WORK_NO', width: '400rpx'}, 
      {title: '***', key: 'WORK_NAME', width: '400rpx'}, 
      {title: '***', key: 'TOTAL_SCORE', width: '400rpx'}, 
      {title: '***', key: 'JF_SOUR', width: '400rpx'}, 
      {title: '***', key: 'ORDER_NO', width: '400rpx'}, 
      {title: '***', key: 'CALL_NO', width: '400rpx'}, 
      {title: '***', key: 'VOICE_NO', width: '400rpx'}, 
      {title: '***', key: 'REASON', width: '400rpx'}, 
      {title: '***', key: 'CLASS2', width: '400rpx'}, 
      {title: '***', key: 'SCORE', width: '400rpx'}, 
    ],
  },