view

基础库 1.0.0 开始支持本组件。

视图容器,相当于 html 中的 div 。

属性说明

属性名类型默认值必填说明最低支持版本
hover-classstringnone指定按下去的样式类。当 hover-class="none" 时,没有点击态效果1.0.0
hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态1.0.0
hover-start-timenumber50按住后多久出现点击态,单位毫秒1.0.0
hover-stay-timenumber400手指松开后点击态保留时间,单位毫秒1.0.0

效果示例

加了 hover-class 属性后的效果:

代码示例

开发者工具中预览

<view class="page-body">
  <view class="page-section">
    <view class="page-section-title">
      <text>flex-direction: row\n横向布局</text>
    </view>
    <view class="flex-wrapper" style="flex-direction:row;">
      <view hover-class="hover-item" class="flex-item" style="background-color: #73d13d">A</view>
      <view hover-class="hover-item" class="flex-item" style="background-color: #13c2c2">B</view>
      <view hover-class="hover-item" class="flex-item" style="background-color: #40a9ff">C</view>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">
      <text>flex-direction: column\n纵向布局</text>
    </view>
    <view class="flex-wrapper" style="flex-direction:column;">
      <view class="flex-item-v" style="background-color: #73d13d">A</view>
      <view class="flex-item-v" style="background-color: #13c2c2">B</view>
      <view class="flex-item-v" style="background-color: #40a9ff">C</view>
    </view>
  </view>
</view>
.flex-wrapper {
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
}

.flex-item {
  width: 200rpx;
  height: 300rpx;
  text-align: center;
  line-height: 300rpx;
  color: #fff;
}

.flex-item.hover-item {
  opacity: 0.6;
}

.flex-item-v {
  align-self: center;
  width: 300rpx;
  height: 160rpx;
  text-align: center;
  line-height: 160rpx;
  color: #fff;
}

扫码体验

请使用字节宿主APP扫码

Bug & Tip

  • Tip:如果需要使用滚动视图,请使用<scroll-view>
点击纠错
评价此篇文档