基本布局容器的介绍
本文将对块标签view以及行标签text进行简要代码介绍。
一、View标签
在微信开放文档可以清楚地看到view标签的属性以及功能。
地址:https://developers.weixin.qq.com/miniprogram/dev/component/view.html
1、hover-class
创建好以下目录:
text.wxml里使用hover-class属性,命名为boxHover
<view class="box" hover-class="boxHover">Hello</view>
text.wxss里进行简单的样式设计
.box{
width: 100px; height: 100px; background: cadetblue;}
.boxHover{
background: blueviolet;}
Ctrl+S保存后,我们的页面显示如下,点击box块,即可发现颜色改变。
松开后,图片会恢复原来的颜色。
我们还可以对按下去的图片反应时间和恢复成原样的时间进行调整,这里我们用到hover-start-time和hover-stay-time。
2、hover-start-time
我们将hover-start-time设置为500
<view class="box"
hover-class="boxHover"
hover-start-time="500"
>Hello</