前言
组件是视图层的组成单元，具备UI风格样式以及特定的功能效果。当打开某款小程序后，界面中的图片、文字等都需要使用组件，小程序组件使用灵活，组件之间通过相互嵌套进行界面设计，开发者可以通过组件的选择属性设计出不同的界面效果。一个组件包括开始标签和结束标签，属性用来装饰这个组件的样式。
组件书写的格式
<标签名称属性="值">内容</标签名称>
视图容器
1.view
·hover-class：
解释：这个属性时当我们写了两个样式的时候，当我们开打开发者工具时看到的时样式1，但是当我们点击样式1的时候会变化成样式2的效果。
wxml：
<viewclass="lqj1"hover-class="lqj2"></view>
wxss：
.lqj1{ background-color: red;//背景为红色 width: 300rpx;//宽度 height: 300rpx;//高度 } .lqj2{ background-color: blue;//背景为蓝色 width: 300rpx;//宽度 height: 300rpx;//高度 }
效果：
·hover-stop-propagation：
解释：是否阻止父组件的点击状态，就是当我们两个view组件成嵌套关系时，尤其是当父view的样式面积较大而子view的样式面积较小时，会出现当我点击子view时父view也跟着变化，所以此属性的设置可以消除此问题。
没有设置·hover-stop-propagation这个属性时
wxml：
<viewclass="lqj3"hover-class="lqj4"><viewclass="lqj1"hover-class="lqj2"></view></view>
wxss：
.lqj1{ background-color: red; width: 300rpx; height: 300rpx; } .lqj2{ background-color: blue; width: 300rpx; height: 300rpx; } .lqj3{ background-color: chartreuse; width: 600rpx; height: 600rpx; } .lqj4{ background-color: darkmagenta; width: 600rpx; height: 600rpx; }
效果：我们会发现问题，就是：但点击子组件时，子组件在变化的同时父组件也在变化
设置·hover-stop-propagation这个属性时
wxml：
<viewclass="lqj3"hover-class="lqj4"><viewclass="lqj1"hover-class="lqj2"hover-stop-propagation="true"></view></view>
wxss：
.lqj1{ background-color: red; width: 300rpx; height: 300rpx; } .lqj2{ background-color: blue; width: 300rpx; height: 300rpx; } .lqj3{ background-color: chartreuse; width: 600rpx; height: 600rpx; } .lqj4{ background-color: darkmagenta; width: 600rpx; height: 600rpx; }
效果：我们会发现问题，就是：但点击哪个组件，就只有被点击的组件变化
·hover-start-time
解释：当组件有hover-class这个属性时，点击组件时多久才会从样式1变换到样式2
wxml：
<viewclass="lqj1"hover-class="lqj2"hover-start-time="500"></view>
wxss：
.lqj1{ background-color: red; width: 300rpx; height: 300rpx; } .lqj2{ background-color: blue; width: 300rpx; height: 300rpx; }
效果：当点击组件时会发现，组件没有立即从样式1变换到样式2，而是等了500毫秒
`hover-stay-time
解释：当组件有hover-class这个属性时，点击后从样式1变换到样式2之后，在样式2停留多长时间，再变回原来的样式1
wxml：
<viewclass="lqj1"hover-class="lqj2"hover-stay-time="1000"></view>
wxss：
.lqj1{ background-color: red; width: 300rpx; height: 300rpx; } .lqj2{ background-color: blue; width: 300rpx; height: 300rpx; }
效果：点击会发现，从样式1变换到样式2后，再样式2停留了一段时间才变回到了原来的样式1
