CSS3實現多列縱向滾動

效果如圖：

小程序wxml:

<view class='wraper'>
<view class="header">
頭部
</view>
<view class='section'>
<scroll-view scroll-y="true" class='left' scroll-view="true">
<view wx:for="{{30}}" wx:key="{{index}}" class='row'>{{index}}</view>
</scroll-view>
<scroll-view class='right' scroll-y="true">
<view wx:for="{{30}}" wx:key="{{index}}" class='row'>{{index}}</view>
</scroll-view>
</view>
<view class='footer'>
底部
</view>
</view>

 

wxss：

.wraper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: -webkit-box;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
}
.header,.footer{
    width: 100%;
    height: 120rpx;
    line-height: 120rpx;
     font-family: Monaco; font-size: 9pt;">#fff;
    text-align: center;
}
.section {
    display: -webkit-box;
    width: 100%;
    -webkit-box-flex: 1;
}
.left {
    -webkit-box-flex: 1;
    width: 400rpx;
    overflow: auto;
     font-family: Monaco; font-size: 9pt;">#fff;
}
.right {
    -webkit-box-flex: 1;
    overflow: auto;
}
.row {
    width: 100%;
    height: 90rpx;
    border-top: 1rpx solid #ccc;
}

實現思路給最外層大盒子設置彈性盒，並改變方向。頭部固定高，底部固定高，中間高度爲flex：1;並變爲彈性盒，在中間左固定寬度，高度flex:1；over-flow: auto;右側相同。便可實現聖盃佈局中間多列縱向滾動。

這裏用的是box，使用同樣的用法，查看上篇display:box