view

基礎(chǔ)庫(kù) 1.0.0 開(kāi)始支持本組件。

視圖容器，相當(dāng)于 html 中的 div 。如果需要使用滾動(dòng)視圖，請(qǐng)使用 scroll-view。

屬性說(shuō)明

效果示例

加了 hover-class 屬性后的效果：

代碼示例

<view class="page-section-title">
  <text>flex-direction: row\n橫向布局</text>
</view>
  <view class="page-section-spacing">
    <view class="flex-wrp" style="flex-direction:row;">
      <view hover-class="hover" class="flex-item demo-text-1"></view>
      <view hover-class="hover" class="flex-item demo-text-2"></view>
      <view hover-class="hover" class="flex-item demo-text-3"></view>
    </view>
  </view>
</view>
<view class="page-section">
  <view class="page-section-title">
    <text>flex-direction: column\n縱向布局</text>
  </view>
  <view class="flex-wrp" style="flex-direction:column;">
    <view class="flex-item flex-item-V demo-text-1"></view>
    <view class="flex-item flex-item-V demo-text-2"></view>
    <view class="flex-item flex-item-V demo-text-3"></view>
  </view>
</view>

.flex-wrp {
  margin-top: 60rpx;
  display: flex;
}
.flex-item {
  width: 200rpx;
  height: 300rpx;
  font-size: 26rpx;
}
.flex-item.hover {
  background: green;
}
.flex-item-V {
  margin: 0 auto;
  width: 300rpx;
  height: 200rpx;
}