您的当前位置:首页正文

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

2024-11-27 来源:个人技术集锦

一. 什么是小程序的组件

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

二. 视图组件

view 组件 常用的属性有如下 :

.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 , 为橙色.
其他的属性,在上面的属性介绍中有说明

<!--index.wxml-->
<view class="container">
  <view class='a size' 
  hover-class='d' 
  hover-start-time='1000' 
  hover-stay-time='2000'>a</view>
</view>

测试:
目前 a 为红色

显示全文