微信小程序开发初学：视觉容器--view

最新推荐文章于 2025-05-19 16:09:53 发布

晚风也很浪漫

最新推荐文章于 2025-05-19 16:09:53 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/Dae_Lzh/article/details/112910452

小程序专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了微信小程序中view组件的作用及其基本属性，如hover-class、hover-start-time和hover-stay-time，展示了如何设置点击态效果，并通过实例解释了hover-stop-propagation属性如何阻止点击态向上冒泡。内容涵盖了view的样式切换和事件处理，对于小程序开发具有参考价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

view是微信小程序的最基本容器，作用与前端开发中的div容器作用相同，用于存放内容（默认垂直排列）。

view具有的属性

hover-class
类型：String
默认值：none
指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果

示例代码：

<view class="title" hover-class="hClass">这是标题</view>

.title{ background:blue; }
/*普通样式*/
.hClass{ background:red; color:white; }
/*当按下view时背景色 改为red，文字颜色改为white*/

hover-start-time
类型：number
默认值：50（单位毫秒）
按住后多久出现点击态（hover-class的样式）

hover-stay-time
类型：number
默认值：200（单位毫秒）
手指松开后点击态保留时间

（hover-start-time和hover-stay-time属性在实际开发中应用较少）

示例代码：

<view class="title" hover-class="hClass"
hover-start-time="75" hover-stay-time>
这是标题</view>
<!--按下view容器75ms后显示hover-class样式，手指松开后保持200ms-->

.title{ background:blue; }
/*普通样式*/
.hClass{ background:red; color:white; }
/*当按下view时背景色 改为red，文字颜色改为white*/

hover-stop-propagation
类型：boolean
默认值：false
指定是否阻止本节点的祖先节点出现点击态

<view class="v1" hover-class="hV1">
  <view class="v2" hover-class="hV2" hover-stop-propagation></view>
</view>
<!--二级容器，v2是v1的子容器，添加 hover-stop-propagation属性使得点击子容器的时候父容器不被影响-->
<!--点击v2时，v2的背景色改为 blueviolet，v1的背景色仍为 yellowgreen。-->

.v1{
  width: 200px; height: 200px;
  background: yellowgreen;
}
.hV1{
  background: tomato;
}
.v2{
  width: 100px; height: 100px;
  background: blue;
}
.hV2{
  background: blueviolet;
}