view
视图容器
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
hover-class | String | none | 否 | 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 | |
hover-stop-propagation | Boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | |
hover-start-time | Number | 50 | 否 | 按住后多久出现点击态,单位毫秒 | |
hover-stay-time | Number | 400 | 否 | 手指松开后点击态保留时间,单位毫秒 |
示例代码:
<!--pages/component/pages/view/view.mcml-->
<view>Hello MoreCross!</view>
<view class="hoverButton" hover-class="hoverClassOuter">我有点击效果</view>
<view class="hoverButton" hover-class="hoverClassOuter">
我不会被内部view触发点击效果
<view class="hoverButton" hover-class="hoverClassInner" hover-stop-propagation="{{true}}">我是内部view</view>
</view>
<view class="hoverButton" hover-class="hoverClassOuter">
我会被内部view触发点击效果
<view class="hoverButton" hover-class="hoverClassInner" hover-stop-propagation="{{false}}">我是内部view</view>
</view>
/*pages/component/pages/view/view.mcss*/
.hoverClassOuter{
background-color: red;
color:blue;
}
.hoverClassInner{
background-color: green;
color:white;
}
.hoverButton{
margin: 20rpx 0;
}