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

微信小程序中没有关于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:forwx:key的位置,可根据需求,自定义数据,循环获取数据,或者进行其他的操作。
3.条条大路通罗马,没有最好的方案,只有更好的方法。该模板很简单很通俗,或许会在将来有一定的帮助,本人只是为了做一个记录和参考,若有不足的地方,还望各路大佬指出。

    原文作者:Bug先生
    原文地址: https://blog.csdn.net/weixin_45286755/article/details/99412929
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞