view | uni-app-x

view

view 兼容性

属性

# view

组件类型：UniViewElement

基本视图容器

# view 兼容性

Android	iOS	web
3.9	4.11	4.0

# 属性

名称	类型	默认值	描述
hover-class	string(string.ClassString)	"none"	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	boolean	false	指定是否阻止本节点的祖先节点出现点击态(祖先节点：指根节点到该节点路径上的所有节点都是这个节点的祖先节点)
hover-start-time	number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	number	400	手指松开后点击态保留时间，单位毫秒

# 说明

为什么使用hover-class？使用 css :active伪类来实现点击态，很容易触发，并且滚动或滑动时点击态不会消失，体验较差。建议使用 hover-class 属性来实现。并且App平台目前不支持css伪类。

# view 属性兼容性

	Android	iOS	web
hover-class	3.9	4.11	4.0
hover-stop-propagation	3.9	4.11	4.0
hover-start-time	3.9	4.11	4.0
hover-stay-time	3.9	4.11	4.0

# App平台

HBuilder4.0以下版本hover-class属性App端与微信小程序效果一样，手指按下进入hover-class状态后，手指移动就会取消hover-class状态
HBuilder4.0及以上版本App端调整为手指在view范围内移动不会取消hover-class状态，手指移动到view范围之外才会取消hover-class状态

# 示例

hello uni-app x

Template

Script

<template>
  <page-head title="view"></page-head>
  <view class="main" :hover-class="hover_class ? 'is-parent-hover' : 'none'">
    <view class="test-view" :hover-class="hover_class ? 'is-hover' : 'none'" :hover-stop-propagation="stop_propagation"
      :hover-start-time="start_time" :hover-stay-time="stay_time">
    </view>
  </view>
  <scroll-view style="flex: 1" scroll-y="true">
    <view class="content">
      <boolean-data :defaultValue="false" title="是否指定按下去的样式类" @change="change_hover_class_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="是否阻止本节点的祖先节点出现点击态"
        @change="change_stop_propagation_boolean"></boolean-data>
      <enum-data :items="start_time_enum" title="按住后多久出现点击态" @change="radio_change_start_time_enum"></enum-data>
      <enum-data :items="stay_time_enum" title="手指松开后点击态保留时间" @change="radio_change_stay_time_enum"></enum-data>
    </view>
  </scroll-view>
</template>


<style>
  .main {
    padding: 5px 0;
    flex-direction: row;
    justify-content: center;
  }

  .test-view {
    height: 200px;
    width: 200px;
    background-color: white;
  }

  .text {
    color: #777;
    font-size: 13px;
  }

  .is-hover {
    background-color: #179b16;
  }

  .is-parent-hover {
    background-color: #aa0000;
  }
</style>