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

原创于 2019-03-10 11:15:39 发布 · 323 阅读

0 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

49 篇文章

订阅专栏

本文深入探讨了小程序的视图组件概念，详细介绍了view组件的常用属性及其在页面布局中的应用。通过具体代码示例，展示了如何使用flex布局来调整元素顺序和大小，以及hover效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- - 一. 什么是小程序的组件
  - 二. 视图组件

一. 什么是小程序的组件

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

二. 视图组件

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

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