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