uniapp view
uniapp view 组件介绍
在 uniapp 中，<view> 是一个基础容器组件，类似于 HTML 中的 <div>，用于布局和包裹其他元素。它支持 Flex 布局，并可以绑定事件、设置样式等。
基本用法
<view class="container">
<text>这是一个文本内容</text>
</view>常用属性
- hover-class：设置点击时的样式类名（类似
:active效果）。 - hover-start-time：按住后多久出现点击态（单位：ms）。
- hover-stay-time：手指松开后点击态保留时间（单位：ms）。
- style / class：自定义样式或类名。
<view
hover-class="active-style"
hover-start-time="50"
hover-stay-time="300"
@click="handleClick"
>
点击我会有反馈效果
</view>事件绑定
支持常见的事件，如 @click、@touchstart、@touchend 等。
<view @click="handleClick">点击触发事件</view>methods: {
handleClick() {
console.log("View 被点击");
}
}Flex 布局示例
<view> 默认支持 Flex 布局，可以通过样式调整排列方式。
<view class="flex-container">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
</view>.flex-container {
display: flex;
justify-content: space-around;
}
.item {
width: 100px;
height: 100px;
background-color: #f0f0f0;
}注意事项
- 在小程序中，
<view>会被编译为<view>标签；在 H5 端会被编译为<div>。 - 避免嵌套过深，影响渲染性能。
- 结合
scroll-view可实现滚动区域布局。
通过合理使用 <view>，可以构建灵活的多端兼容页面布局。
