黔优媒体网-软文媒体自助发稿平台!
  1. 行业资讯
  2. 正文

了解小程序中最基础的容器

来源:黔优媒体网   时间:2024-09-19

 微信小程序-view视图容器:是小程序中最基础的容器,可以实现页结构的划分,页面布局的调整等。除了公共属性,还有4个属性。

以下我写了一段代码,表达效果来讲解会好一些,希望能够copy到你的微信编译器去运行去查看。

这里hover-class是指当我们点击的时候会变成什么样的样式,hover-start-time是指当我们点击多久以后才会显示我们hover-class的样式,hover-stay-time是指这个样式会持续多久,hover-stop-propagation解释比较麻烦,因此我写了一段代码,通过效果来讲解会好一些,希望能够copy到你的微信编译器去运行去查看。

index.wxml

 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意思就是,通俗的讲,防止把效果传播出去的意思。

 相关推荐:

PHP图形计算器

视频教程:视图容器组件-极客学院微信小程序从基础到实战

以上就是了解小程序中最基础的容器--view视图容器【附代码】的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。


【免责申明】黔优媒体网以上展示内容来源于用户自主上传、合作媒体、企业机构或网络收集整理,版权争议与本站无关,文章涉及见解与观点不代表黔优媒体网官方立场,请读者仅做参考,本文标题:了解小程序中最基础的容器;欢迎转载,转载时请说明出处。若您认为本文侵犯了您的版权信息,或您发现该内容有任何违法/违规的内容,请您立即联系我们及时修正或删除。(邮箱号: kefu@qianu.com)