1.Table
https://blog.csdn.net/jibenjun/article/details/79415190
行间背景间隔的表格
https://blog.csdn.net/henryhu712/article/details/80460370
能左右移动的表格
https://www.jianshu.com/p/6f30fd5bc446
https://github.com/Small-Years/MiNi_Table_Demo
wxml
<view class="table">
<block>
<view class="tr">
<view class=" td ft-white">卖5</view>
<view class="td {{report.color}} ">{{filters.toFix(report.m_fSellPrice[4])}}</view>
<view class="td ft-yellow">{{report.m_fSellVolume[4]}}</view>
<view class="td ft-yellow ">0</view>
</view>
<view class="tr">
<view class=" td ft-white">卖4</view>
<view class="td {{report.color}} ">{{filters.toFix(report.m_fSellPrice[3])}}</view>
<view class="td ft-yellow">{{report.m_fSellVolume[3]}}</view>
<view class="td ft-yellow ">0</view>
</view>
<view class="tr">
<view class=" td ft-white">卖3</view>
<view class="td {{report.color}} ">{{filters.toFix(report.m_fSellPrice[4])}}</view>
<view class="td ft-yellow">{{report.m_fSellVolume[2]}}</view>
<view class="td ft-yellow ">0</view>
</view>
<view class="tr">
<view class=" td ft-white">卖2</view>
<view class="td {{report.color}} ">{{filters.toFix(report.m_fSellPrice[3])}}</view>
<view class="td ft-yellow">{{report.m_fSellVolume[1]}}</view>
<view class="td ft-yellow ">0</view>
</view>
<view class="tr">
<view class=" td ft-white">卖1</view>
<view class="td {{report.color}} ">{{filters.toFix(report.m_fBuyPrice[0])}}</view>
<view class="td ft-yellow">{{report.m_fSellVolume[0]}}</view>
<view class="td ft-yellow ">0</view>
</view>
<view class="tr ft-white">
<view class=" td ">--</view>
<view class="td "></view>
<view class="td"></view>
<view class="td "></view>
</view>
<view class="tr">
<view class=" td ft-white">买1</view>
<view class="td {{report.color}} ">{{filters.toFix(report.m_fSellPrice[0])}}</view>
<view class="td ft-yellow">{{report.m_fBuyVolume[0]}}</view>
<view class="td ft-yellow ">0</view>
</view>
<view class="tr">
<view class=" td ft-white">买2</view>
<view class="td {{report.color}} ">{{filters.toFix(report.m_fSellPrice[1])}}</view>
<view class="td ft-yellow">{{report.m_fBuyVolume[1]}}</view>
<view class="td ft-yellow ">0</view>
</view>
<view class="tr">
<view class=" td ft-white">买3</view>
<view class="td {{report.color}} ">{{filters.toFix(report.m_fSellPrice[2])}}</view>
<view class="td ft-yellow">{{report.m_fBuyVolume[2]}}</view>
<view class="td ft-yellow ">0</view>
</view>
<view class="tr">
<view class=" td ft-white">买4</view>
<view class="td {{report.color}} ">{{filters.toFix(report.m_fSellPrice[3])}}</view>
<view class="td ft-yellow">{{report.m_fBuyVolume[3]}}</view>
<view class="td ft-yellow ">0</view>
</view>
<view class="tr">
<view class=" td ft-white">买5</view>
<view class="td {{report.color}} ">{{filters.toFix(report.m_fSellPrice[4])}}</view>
<view class="td ft-yellow">{{report.m_fBuyVolume[4]}}</view>
<view class="td ft-yellow ">0</view>
</view>
</block>
<block wx:for="{{reportList}}" wx:key="{{startTime}}">
<view class="tr {{item.color}}">
<view class=" td ft-g ">{{filters.sub(item.startTime)}}</view>
<view class="td ">{{filters.toFix(item.m_fRecentNewPrice)}}</view>
<view class="td ">{{item.vol}}</view>
<view class="td ">{{item.m_fTotalTradeNumber}}</view>
</view>
</block>
</view>
wxss
/* miniprogram/pages/stock/EGchart/index/index.wxss */
.container2 {
display: flex;
width: 100%;
height: 550;
background-color: #fff;
font-size: 24rpx;
}
.item1 {
background: #f5f5f5;
text-align: center;
width: 460rpx;
height: 550px;
background-color: #1c1f27;
border: 1px solid #fff;
}
.item2 {
width: 240rpx;
height: 550px;
background-color: #1c1f27;
border: 1px solid #fff;
}
page {
height: 100%;
overflow: auto;
background: #1c1f27;
}
.container {
font-size: 24rpx;
background: #1c1f27;
color: white;
}
.content {
padding-top: 50rpx;
}
.stock {
padding-bottom: 20rpx;
font-size: 24rpx;
}
.stock text {
display: block;
color: white;
}
.wrap {
display: flex;
background: #fff;
padding: 30rpx 20rpx;
}
.canvas-wrap {
position: relative;
}
.canvas-wrap .axis-stage {
position: absolute;
top: 0;
left: 0;
}
.title {
font-size: 32rpx;
font-weight: bold;
color: #666;
}
.lineCanvas, .stock {
width: 700rpx;
height: 650rpx;
margin: 50rpx auto;
}
.foot {
font-size: 20rpx;
text-align: center;
}
.p {
display: block;
margin: 2rpx 0;
}
.table {
border: 0px solid darkgray;
}
.tr {
display: flex;
width: 32%;
justify-content: center;
height: 3rem;
align-items: center;
}
.td {
width: 40%;
justify-content: center;
text-align: center;
}
.bg-w {
background: snow;
}
.bg-g {
background: #e6f3f9;
}
.ft-red {
color: red;
}
.ft-green {
color: green;
}
.ft-white {
color: white;
}
.ft-yellow {
color: yellow;
}
.th {
width: 40%;
justify-content: center;
background: #36f;
color: #fff;
display: flex;
height: 3rem;
align-items: center;
}
2.Flex 实现表格布局 (微信小程序)