微信小程序中没有关于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.条条大路通罗马,没有最好的方案,只有更好的方法。该模板很简单很通俗,或许会在将来有一定的帮助,本人只是为了做一个记录和参考,若有不足的地方,还望各路大佬指出。