小程序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

发表评论