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

╰半橙微兮° 2022-03-10 07:38 340阅读 0赞

### 文章目录 ###

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

### 一. 什么是小程序的组件 ###

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

### 二. 视图组件 ###

view 组件 常用的属性有如下 :  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
代码示例  
在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 , 为橙色.  
其他的属性,在上面的属性介绍中有说明

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

测试:  
目前 a 为红色  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
点按下去后, 变成了橙色.  
![20190310111447667.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220310/6632e9bfb4964c348a5db6f89cf7e601.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220310/9191fc79241b4ec6a885f00d9cfa0405.png
[20190310111447667.png]: /images/20220310/4681752a3a5243039ec912da1869bf50.png