这篇文章主要介绍了小程序中view视图容器的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
微信小程序-view视图容器：是小程序中最基础的容器，可以实现页结构的划分，页面布局的调整等。除了公共属性，还有4个属性。
以下我写了一段代码，表达效果来讲解会好一些，希望能够copy到你的微信编译器去运行去查看。
这里hover-class是指当我们点击的时候会变成什么样的样式，hover-start-time是指当我们点击多久以后才会显示我们hover-class的样式，hover-stay-time是指这个样式会持续多久，hover-stop-propagation解释比较麻烦，因此我写了一段代码，通过效果来讲解会好一些，希望能够copy到你的微信编译器去运行去查看。
index.wxml
计算
安全
数据库
网络和加速
企业服务
<view class="container">
<view class='outBlock' hover-class='outBlockHover' hover-start-time='{{outStart}}' hover-stop-propagation='true' hover-stay-time='10000'>
<view class='midBlock' hover-class='midBlockHover' hover-start-time='{{midStart}}' hover-stop-propagation='true'>
<view class='inBlock' hover-class='inBlockHover' hover-start-time='{{inStart}}' hover-stop-propagation='true'>
</view>
</view>
</view>
</view>index.wxss
.outBlock
{
border:1rpx solid black;
width: 1000rpx;
height: 500rpx;
background-color:aqua;
}
.midBlock
{
border: 1rpx solid black;
width:500rpx;
height: 300rpx;
margin: 100rpx;
background-color: gray;
}
.inBlock
{
border: 1rpx solid black;
width: 300rpx;
height: 200rpx;
margin: 50rpx;
background-color: blueviolet;
}
.outBlockHover
{
background-color: black;
}
.midBlockHover
{
background-color: darkblue;
}
.inBlockHover
{
background-color: darkgreen;
}index.js的data部分
data: {
outStart:1000,
midStart:2000,
inStart:3000
},
正常情况下，当我们点击任何最内部的box的时候其余都会改变，中间的box的时候最外外面的也会改变，因为范围的原因，因为最里面的box是包含在中间的，外面的box里面，中间的包含在外面的box内。如果我们想要阻止这种效果，那就要用hover-stop-propagation了。propagation字面的意思就是传播，hover-stop-propagation意思就是，通俗的讲，防止把效果传播出去的意思。
感谢你能够认真阅读完这篇文章，希望小编分享的“小程序中view视图容器的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
