1、單排橫向滾動
html
<scroll-view scroll-x="true" class="kite-classify-scroll">
<view class="kite-classify-cell"></view>
<view class="kite-classify-cell"></view>
<view class="kite-classify-cell"></view>
</scroll-view>
css
.kite-classify-scroll{
width: 100%;
height: 150px;
overflow: hidden;
white-space: nowrap;
}
.kite-classify-cell{
display: inline-block;
width: 115px;
height: 140px;
}
2、多排橫向滾動
html
<scroll-view scroll-x="true" class="kite-classify-scroll">
<view class="kite-classifie-content">
<view class="kite-classify-cell"></view>
</view>
<view class="kite-classifie-content">
<view class="kite-classify-cell"></view>
</view>
....
</scroll-view>
css
.kite-classify-scroll{
width: 100%;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.kite-classifie-content{
width: 100%;
height: 150px;
overflow: hidden;
white-space: nowrap;
}
.kite-classify-cell{
display: inline-block;
width: 115px;
height: 140px;
}