微信小程序day02_05之 小程序视图组件

一. 什么是小程序的组件

• 多个组件构成一张视图页面
• 组件包含开始标签和结束标签
• 每个组件都包含一些公用属性

二. 视图组件

view 组件 常用的属性有如下 : 代码示例 在view.wxss 中, 定义如下的样式

.container{

  display: flex;
}
.size {
  width: 110rpx;
  height: 150rpx;
}
.a {
  background: red;
  order: 5;
  flex: 8
}
.b {
  background: gray;
  order: 4;
  flex: 6
}
.c {
  background: yellow;
  order: 3;
  flex: 4
}
.d {
  background: orange;
  order: 2;
   flex: 2
}
.e {
  background: green;
  order: 1;
    flex: 1
}

在view.wxml中 ,代码如下 定义的默认的样式为a , 为红色. hover-class 定义了按下去的样式为d , 为橙色. 其他的属性,在上面的属性介绍中有说明

  a

测试: 目前 a 为红色 点按下去后, 变成了橙色.