一.页面wxml设计代码:

<view class=”container” bindtouchstart=’containerTap1′>

<view class=”table” >

<view class=”tr” wx:for=”{ {1}}”>

<view class=’td’ bindtap=”XiuXian” style=’background-color:{ {TbBackgroundColor}}’> 休闲</view>

<view class=”td”> 益智</view>

</view>

<view class=”tr” wx:for=”{ {1}}”>

<view class=’td’> 技能</view>

<view class=”td”> 直播</view>

</view>

<view class=”tr” wx:for=”{ {1}}”>

<view class=’td’> 运动</view>

<view class=”td”> 体育</view>

</view>

</view>

</view>

二.样式wxss布局代码：

.table {

margin-top: 20px;

border-right: 0;

border-bottom: 0;

border-top: 1px solid #dadada;

width: 100%;

}

.tr {

width: 100%;

display: flex;

justify-content: space-between;

}

.th, .td {

padding: 10px;

border-bottom: 1px solid #dadada;

border-right: 1px solid #dadada;

text-align: center;

width: 100%;

height: 50px;

font-size: 30px;

}