小程序scroll-view使用
文章描述：
小程序使用scroll-view横向和纵向布局效果
横向
wxml
<scroll-view class="major" scroll-x="ture">
<view class="majorCon">
<navigator url="" class="box">
1
</navigator>
<navigator url="" class="box">
2
</navigator>
<navigator url="" class="box">
3
</navigator>
<navigator url="" class="box">
4
</navigator>
<navigator url="" class="box">
5
</navigator>
<navigator url="" class="box">
6
</navigator>
</view>
</scroll-view>
wxss
.major{ margin-top: 40rpx;}
.majorCon{ white-space: nowrap; padding:0;}
.major .box{ text-align: center; width: 200rpx; height: 200rpx; margin-right: 20rpx;display: inline-block; background: gold; word-break:break-all; line-height: 200rpx;}
纵向
wxml
<scroll-view class="scroll" scroll-y="ture">
<view class="items">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
<view class="item">5</view>
<view class="item">6</view>
</view>
</scroll-view>
wxss
.items{height: 350px;}
.item{ flex:0 0 100px; width: 100%; height: 200rpx; background: pink; margin-right: 2px; margin-bottom: 2px;line-height: 200rpx; text-align: center;}
发布时间：2021/06/08
发表评论