ウィーチャットウィジェットテーブル
11612 ワード
WXML
wxss
js
<view class="incomeDaren">
<view style='background:white;margin:20rpx;border-radius:10rpx;'>
<view style='color:rgba(254, 117, 29, 1);text-align:center;padding:20rpx;font-weight:bold'> </view>
<view class="table">
<view class="tr bg-w">
<view class="th"> </view>
<view class="th"> </view>
<view class="th "> </view>
</view>
<block wx:for="{{listData}}" wx:key="{{code}}">
<view class="tr bg-g">
<view style='color:#B2B2B2' class="td">{{item.code}}
</view>
<view style='font-size:26rpx' class="td">{{item.text}}</view>
<view style='color:#B2B2B2' class="td">{{item.type}}</view>
</view>
</block>
</view>
</view>
</view>
wxss
/* */
.table {
border: 0px solid darkgray;
height:900rpx;
overflow:scroll
}
::-webkit-scrollbar {
display: none;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 3rem;
align-items: center;
}
.td {
width:40%;
justify-content: center;
text-align: center;
}
.th {
width: 40%;
justify-content: center;
color: black;
display: flex;
height: 3rem;
align-items: center;
}
js
listData:[
{ "code": "1", "text": " ", "type":"¥56594"},
{ "code": "2", "text": " ...", "type":"¥46594"},
{ "code": "3", "text": " ", "type":"¥40594"},
{ "code": "4", "text": "Frank", "type":"¥37654"},
{ "code": "5", "text": " ", "type":"¥37555"},
{ "code": "6", "text": " ", "type":"¥35341"},
{ "code": "7", "text": "M。", "type":"¥32201"},
{ "code": "8", "text": " ", "type":"¥31231"},
{ "code": "9", "text": " ", "type":"¥31220"},
{ "code": "10", "text": " ", "type":"¥30231"},
{ "code": "11", "text": " ", "type":"¥28562"}
],
```