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

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

文章目录

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

一. 什么是小程序的组件

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

二. 视图组件

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

  1. .container{ 
  3.   display: flex;
  4. }
  5. .size { 
  6.   width: 110rpx;
  7.   height: 150rpx;
  8. }
  9. .a { 
  10.   background: red;
  11.   order: 5;
  12.   flex: 8
  13. }
  14. .b { 
  15.   background: gray;
  16.   order: 4;
  17.   flex: 6
  18. }
  19. .c { 
  20.   background: yellow;
  21.   order: 3;
  22.   flex: 4
  23. }
  24. .d { 
  25.   background: orange;
  26.   order: 2;
  27.    flex: 2
  28. }
  29. .e { 
  30.   background: green;
  31.   order: 1;
  32.     flex: 1
  33. }

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

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

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

发表评论

表情：
评论列表 （有 0 条评论，504人围观）

还没有评论，来说两句吧...

相关阅读