微信小程序开发（七） scroll-view 组件

竖向滚动

index.wxml

<scroll-view class="scroll-view" scroll-y="true">
  <view class="view-A">A</view>
  <view class="view-B">B</view>
  <view class="view-C">C</view>
</scroll-view>

index.wxss

.scroll-view {
    
    
  height: 100px;
  width: 100%;
  text-align: center;
  line-height: 100px;
}
.view-A {
    
    
  background-color: aquamarine;
}
.view-B {
    
    
  background-color: burlywood;
}
.view-C {
    
    
  background-color: cadetblue;
}

视图默认竖向排列

• scroll-y

将 scroll-y属性设置为"true"

横向滚动

index.wxml

<scroll-view class="scroll-view" scroll-x="true">
  <view class="view-A">A</view>
  <view class="view-B">B</view>
  <view class="view-C">C</view>
</scroll-view>

index.wxss

.scroll-view {
    
    
  width: 100%;
  white-space: nowrap;
}
.view-A {
    
    
  height: 100px;
  width: 100%;
  line-height: 100px;
  text-align: center;
  background-color: aquamarine;
  display: inline-block;
}
.view-B {
    
    
  height: 100px;
  width: 100%;
  line-height: 100px;
  text-align: center;
  background-color: burlywood;
  display: inline-block;
}
.view-C {
    
    
  height: 100px;
  width: 100%;
  line-height: 100px;
  text-align: center;
  background-color: cadetblue;
  display: inline-block;
}

需要注意两点：

• white-space: nowrap;

• display: inline-block;

  扫描二维码关注公众号，回复： 15166720 查看本文章