view | uni-app-x

# view

组件类型：UniViewElement

基本视图容器

view组件是 uni-app x 最基本的视图容器，它的作用类似于HTML中的div标签。

# 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 属性

名称

类型

默认值

兼容性

描述

hover-class

string(string.ClassString)

"none"

指定按下去的样式类。当 hover-class="none" 时，没有点击态效果

hover-stop-propagation

boolean

false

指定是否阻止本节点的祖先节点出现点击态(祖先节点：指根节点到该节点路径上的所有节点都是这个节点的祖先节点)

hover-start-time

number

按住后多久出现点击态，单位毫秒

hover-stay-time

number

400

手指松开后点击态保留时间，单位毫秒

# 说明

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

# App平台

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

# 获取原生view对象

为增强uni-app x组件的开放性，从 HBuilderX 4.25 起，UniElement对象提供了 getAndroidView 和 getIOSView 方法。

该方法可以获取到 view 组件对应的原生对象，即Android的ViewGroup对象、iOS的UIView对象。

进而可以调用原生对象提供的方法，这极大的扩展了组件的能力。

Android 平台：

获取view组件对应的UniElement对象，通过UniElement对象的getAndroidView函数获取组件原生ViewGroup对象

//导入安卓原生ViewGroup对象
import ViewGroup from "android.view.ViewGroup"

//通过view组件定义的id属性值，获取view标签的UniElement对象
const viewElement = uni.getElementById(id)
//UniElement.getAndroidView设置泛型为安卓底层ViewGroup对象, 直接获取ViewGroup 如果泛型不匹配会返回null
if(viewElement != null) {
	//viewGroup就是view组件对应的原生view对象
	const viewGroup = viewElement.getAndroidView<ViewGroup>()
	if(viewGroup != null) {
		// viewGroup.xx 即可使用ViewGroup的方法
	}
}

iOS 平台：

获取view组件对应的UniElement对象，通过UniElement对象的getIOSView函数获取组件原生UIView对象

//通过 view 组件定义的 id 属性值，获取 view 标签的 UniElement 对象
const viewElement = uni.getElementById(id)
//获取原生 view
const view = viewElement?.getIOSView();
if (view != null && view instanceof UIView) {
    // view.xx 即可使用UIView的方法
}

iOS平台 uvue 环境使用 js 驱动无法处理原生类型，getIOSView 方法需要在 uts 插件中使用。

更多示例请参考 uts 插件 uts-get-native-view

# 示例

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">
    <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>