微信小程序入门②基本布局容器的介绍

基本布局容器的介绍

本文将对块标签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</<