微信小程序没有table标签,但是又需要实现这样的效果,参考别人的调整了样式细节,共享一下。
最终效果如图所示:
代码实现:
wxml
<view class="table">
<view class="tr bg-w">
<view class="th index-width">排名</view>
<view class="th enterprise-name-width">名称</view>
<view class="th count-width">数量</view>
</view>
<block wx:for="{
{listData}}" wx:key="{
{code}}">
<view class="tr {
{index % 2 == 0?'' : 'bg-g'}}">
<view class="td index-width">{
{index+1}}</view>
<view class="td enterprise-name-width">{
{item.name}}</view>
<view class="td count-width">{
{item.count}}</view>
</view>
</block>
</view>
js
Page({
data: {
listData: [{
name: "名称1",
count: 10
},
{
name: "名称2",
count: 8
},
{
name: "名称3",
count: 7
},
{
name: "名称4",
count: 4
}
]
},
onLoad: function () {
// 调用接口进行数据初始化
//this.getRankSum();
},
/**
* 获取排名
*/
getRankSum() {
// 请求后对表格进行数据填充
my.getRankSum().then(response => {
this.setData({
loading: false
});
let result = response.data.list;
this.setData({
listData: result
});
});
}
})
wxss
/* 表格相关样式 */
.table {
min-height: 200px;
border: 1px solid #e8e1e1;
border-radius: 3px;
margin-top: 20px;
font-size: 15px;
text-align: left;
margin: 15px;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 3rem;
align-items: center;
color: #8c8686;
}
.td {
width: 40%;
justify-content: left;
padding-left: 17px;
}
.bg-w {
background: snow;
}
.bg-g {
background: #fde9f0;
}
.th {
width: 40%;
justify-content: left;
padding-left: 17px;
background: #ffbed4;
color: #fff;
display: flex;
height: 3rem;
align-items: center;
}
.enterprise-name-width {
width: 65% !important;
}
.index-width {
width: 15% !important;
}
.count-width {
width: 20% !important;
}
.loadMore {
position: relative;
text-align: center;
margin-top: 20px;
}