微信小程序没有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;
}
其他微信小程序相关博客:
微信小程序之 swiper 的 tab 选项卡高度自适应问题解决方案
原文地址:https://blog.csdn.net/j1231230
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。