微信小程序自定义表格样式

最新推荐文章于 2025-07-15 03:47:42 发布

Bug先生

最新推荐文章于 2025-07-15 03:47:42 发布

阅读量6.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序 table

本文链接：https://blog.youkuaiyun.com/weixin_45286755/article/details/99412929

微信小程序专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在微信小程序中使用flex布局模拟table组件，通过wxml和wxss实现自定义表格样式。内容包括th和td的设置，以及如何结合js处理数据，创建灵活的列表样式。虽然小程序不内置table组件，但此方法提供了一种简单易懂的替代方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序中没有关于table组件的内容,所以如果在小程序中需要用到列表样式时,就可以通过flex布局利用view设置样式模仿table的样式

wxml:

   <view class="table">
      <view class="tr">//标题行,设置了一个的背景样式
        <view class="th ">1</view>
        <view class="th ">2</view>
        <view class="th ">3</view>
        <view class="th ">4</view>
      </view>
      <block wx:for="" wx:key="">
        <view class="tr {{index % 2 ==0 ?'bg-w':'bg-g'}}">//内容行,判断若行下标为单数,则设置一个背景颜色,若为双数,则设置另一个颜色
          <view class="td">1</view>
          <view class="td">2</view>
          <view class="td">3</view>
          <view class="td">4</view>
      </block>
    </view>

wxss:

.table {
  border: 0px solid darkgray;//根据需求设置,可有可无
}

.tr {
  width: 100%;
  display: flex;//设置弹性容器
  align-items: center;//内容垂直居中
  border-bottom: 1rpx solid #f7f8fb;//可有可无
}

.th {
  width: 25%;//注意列单位个数,因为我写的例子是四个单位,所以每个单位宽度设置为25%
  height: 3rem;//高度按需求设置
  display: flex;//设置弹性容器
  justify-content: center;//内容居中显示
  align-items: center;//内容垂直居中
  background: #dbb97a;//设置背景颜色
  color: #fff;//字体颜色
  font-size: 26rpx;//字体大小
}

.td {
  width: 25%;//同上
  display: flex;//设置弹性容器
  justify-content: center;//内容居中显示
  text-align: center;//文字居中
  font-size: 26rpx;//设置字体大小
  color: #dbb97a;//字体颜色
  padding: 0.5rem 0 0.5rem 0;//设置上下padding
}

.bg-w {
  background: #ccc;
}

.bg-g {
  background: #f7f8fb;
}

最后:

以上就是关于微信小程序简单的自定义模仿table的全部内容啦。
再说几句,
1.th 是表示每行单元格个数的单位,可根据需求任意添加个数,对应的需要添加同样个数的 td 对齐。
2.没有贴出 js 数据模板,但是在 block 模块里留下了 wx:for 和 wx:key的位置,可根据需求,自定义数据,循环获取数据,或者进行其他的操作。
3.条条大路通罗马,没有最好的方案,只有更好的方法。该模板很简单很通俗,或许会在将来有一定的帮助,本人只是为了做一个记录和参考,若有不足的地方,还望各路大佬指出。