微信小程序——scroll-view组件（可滚动视图）（四）

scroll-view可滚动视图

垂直滚动：

wxml代码：

<scroll-view scroll-y scroll-top="{{scrollTop}}">
      <view id="green" class="scroll-view-item bc_green"></view>
      <view id="red" class="scroll-view-item bc_red"></view>
      <view id="yellow" class="scroll-view-item bc_yellow"></view>
      <view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>

使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。

wxss代码：

scroll-view{
  height: 200px;
}
.scroll-view-item{
  height: 80px;
  width: 400px;
}
.bc_green{
  background: green;
}
.bc_red{
  background: red;
}
.bc_yellow{
  background: yellow;
}
.bc_blue{
  background: blue;
}

js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
      scrollTop:100
  }
})

水平滚动：

wxml代码：

 <scroll-view scroll-x>
      <view class="scroll-view_x">
        <view class="scroll-view-item_x bc_green"></view>
        <view class="scroll-view-item_x bc_red"></view>
        <view class="scroll-view-item_x bc_yellow"></view>
        <view class="scroll-view-item_x bc_blue"></view>
      </view>
 </scroll-view>

wxss代码：

scroll-view{
  width: 100%;
}
.scroll-view_x{
  display: flex;
  height: 80px;
  width: 500px;
  flex-direction: row; 
}
.scroll-view-item_x{
  width: 200px;
  height: 100px;
}
.bc_green{
  background: green;
}
.bc_red{
  background: red;
}
.bc_yellow{
  background: yellow;
}
.bc_blue{
  background: blue;
}