Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Thetimezipsby
unidocs-zh
提交
21db7b57
unidocs-zh
项目概览
Thetimezipsby
/
unidocs-zh
该项目与 Fork 源项目分叉
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
21db7b57
编写于
7月 08, 2024
作者:
Thetimezipsby
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs(view.md): 修改文档hover-stop-propagation h5支持
上级
c175cf1d
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
64 addition
and
64 deletion
+64
-64
docs/component/view.md
docs/component/view.md
+64
-64
未找到文件。
docs/component/view.md
浏览文件 @
21db7b57
所有的视图组件,包括view、swiper等,本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件。
## view
视图容器。
<!-- UNIAPPCOMJSON.view.compatibility -->
它类似于传统html中的div,用于包裹各种元素内容。
如果使用
[
nvue
](
https://uniapp.dcloud.io/tutorial/nvue-outline
)
,则需注意,包裹文字应该使用
`<text>`
组件。
**属性说明**
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
|hover-class|String|none|指定按下去的样式类。当 hover-class="none" 时,没有点击态效果|
|hover-stop-propagation|Boolean|false|指定是否阻止本节点的祖先节点出现点击态,App、
H5、支付宝小程序、百度小程序不支持(支付宝小程序、百度小程序文档中都有此属性,实测未支持)|
|hover-start-time|Number|50|按住后多久出现点击态,单位毫秒|
|hover-stay-time|Number|400|手指松开后点击态保留时间,单位毫秒|
<!-- UNIAPPCOMJSON.view.attribute -->
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/view/view
)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可快速体验完整示例。
::: preview https://hellouniapp.dcloud.net.cn/pages/component/view/view
```
html
<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<template>
<view>
<view
class=
"uni-padding-wrap uni-common-mt"
>
<view
class=
"uni-title uni-common-mt"
>
flex-direction: row
<text>
\n横向布局
</text>
</view>
<view
class=
"uni-flex uni-row"
>
<view
class=
"flex-item uni-bg-red"
>
A
</view>
<view
class=
"flex-item uni-bg-green"
>
B
</view>
<view
class=
"flex-item uni-bg-blue"
>
C
</view>
</view>
<view
class=
"uni-title uni-common-mt"
>
flex-direction: column
<text>
\n纵向布局
</text>
</view>
<view
class=
"uni-flex uni-column"
>
<view
class=
"flex-item flex-item-V uni-bg-red"
>
A
</view>
<view
class=
"flex-item flex-item-V uni-bg-green"
>
B
</view>
<view
class=
"flex-item flex-item-V uni-bg-blue"
>
C
</view>
</view>
</view>
</view>
</template>
```
:::
**Tips**
-
小程序平台如果使用
`<div>`
,编译时会被转换为
`<view>`
。
-
App平台 Vue2 项目在节点非常多时可以尝试使用
`<div>`
替换
`<view>`
以提升渲染性能。
<!-- UNIAPPCOMJSON.view.reference -->
所有的视图组件,包括view、swiper等,本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件。
## view
视图容器。
<!-- UNIAPPCOMJSON.view.compatibility -->
它类似于传统html中的div,用于包裹各种元素内容。
如果使用
[
nvue
](
https://uniapp.dcloud.io/tutorial/nvue-outline
)
,则需注意,包裹文字应该使用
`<text>`
组件。
**属性说明**
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
|hover-class|String|none|指定按下去的样式类。当 hover-class="none" 时,没有点击态效果|
|hover-stop-propagation|Boolean|false|指定是否阻止本节点的祖先节点出现点击态,App、
支付宝小程序、百度小程序不支持(支付宝小程序、百度小程序文档中都有此属性,实测未支持)|
|hover-start-time|Number|50|按住后多久出现点击态,单位毫秒|
|hover-stay-time|Number|400|手指松开后点击态保留时间,单位毫秒|
<!-- UNIAPPCOMJSON.view.attribute -->
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/view/view
)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可快速体验完整示例。
::: preview https://hellouniapp.dcloud.net.cn/pages/component/view/view
```
html
<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<template>
<view>
<view
class=
"uni-padding-wrap uni-common-mt"
>
<view
class=
"uni-title uni-common-mt"
>
flex-direction: row
<text>
\n横向布局
</text>
</view>
<view
class=
"uni-flex uni-row"
>
<view
class=
"flex-item uni-bg-red"
>
A
</view>
<view
class=
"flex-item uni-bg-green"
>
B
</view>
<view
class=
"flex-item uni-bg-blue"
>
C
</view>
</view>
<view
class=
"uni-title uni-common-mt"
>
flex-direction: column
<text>
\n纵向布局
</text>
</view>
<view
class=
"uni-flex uni-column"
>
<view
class=
"flex-item flex-item-V uni-bg-red"
>
A
</view>
<view
class=
"flex-item flex-item-V uni-bg-green"
>
B
</view>
<view
class=
"flex-item flex-item-V uni-bg-blue"
>
C
</view>
</view>
</view>
</view>
</template>
```
:::
**Tips**
-
小程序平台如果使用
`<div>`
,编译时会被转换为
`<view>`
。
-
App平台 Vue2 项目在节点非常多时可以尝试使用
`<div>`
替换
`<view>`
以提升渲染性能。
<!-- UNIAPPCOMJSON.view.reference -->
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录