详解微信小程序视图容器组件的实例代码

详解微信小程序视图容器组件的实例代码
这篇文章主要介绍了微信小程序 视图容器组件的详解及实例代码的相关资料,这里对基础知识进行了详细介绍并附有简单实例代码，需要的朋友可以参考下

这篇文章主要介绍了微信小程序 视图容器组件的详解及实例代码的相关资料,这里对基础知识进行了详细介绍并附有简单实例代码，需要的朋友可以参考下

微信小程序 视图容器组件详解：

小程序给出的视图容器组件有三个：、和：

1、 视图容器

相当于html中的

标签，有四个属性：

hover和hover-class与点击效果有关：hover设置是否启用点击效果，而hover-class设置点击的效果。

hover-start-time和hover-stay-time与点击效果的时间有关：hover-start-time设置点击之后点击效果出现的延迟时间，hover-stay-time设置点击效果持续的时间，单位都是毫秒。

创建一个项目测试一下：

index.wxml

<view class="container"> <view class="flex-item bc_green" hover="true" hover-class="green_hover">1</view> <view class="flex-item bc_red" hover="true" hover-class="red_hover" hover-start-time="400" hover-stay-time="1000">2</view> <view class="flex-item bc_blue">3</view></view>