<view class="left-table">
<view class="thread">{{data[0][0][0]}}</view>
<view class="tbody" wx:for="{{data}}" wx:key="{{index}}">{{item[0][1]}}</view>
</view>
<view class="right-table">
<view class="thread">
<view wx:for="{{data[0]}}" wx:key="{{index}}" wx:if="{{index !== 0}}">{{item[0]}}</view>
</view>
<view class="tbody" wx:for="{{data}}" wx:key="{{index}}">
<view wx:for="{{item}}" wx:for-item="component" wx:for-index="idx" wx:key="{{idx}}" wx:if="{{idx !== 0}}">
<view class="grid-data">{{component[1]}}</view>
<view class="grid-cal">{{component[2]}}</view>
<view class="grid-cal">{{component[3]}}</view>
</view>
</view>
</view>
.left-table {
width:180rpx;
display:block;
flex-direction:column;
position:absolute;
left:0;
top:0;
}
.thread {
white-space: nowrap;
height: 100rpx;
}
.thread > view {
display: inline-block;
text-align: center;
width:180rpx;
}
.tbody {
height:250rpx;
white-space:nowrap;
}
.right-table {
position:relative;
left:180rpx;
width: 570rpx;
overflow: scroll;
}
.tbody > view {
width:180rpx;
display:inline-block;
text-align: center;
}
现在通过这个实现,我可以在屏幕上保留左侧第一列,但顶部仍然滚动。是否可以将顶部保持在固定位置?