微信小程序入门六：组件

什么是组件？

微信官方对组件的定义如下：

组件是视图层的基本组成单元。
组件自带一些功能与微信风格的样式。
一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。
注意：所有组件与属性都是小写，以连字符-连接

组件的属性

所有组件都有如下的属性：
id,class,style,hidden(组件是否显示)，data-（自定义属性），bind/catch*（事件绑定）

一、组件列表

小程序中，基础组件分为了七大类：视图容器、基础内容、表单组件、导航、多媒体、地图、画布、客服会话。
在小程序中，通过使用组件可以少写很多代码~~

1.1 视图容器 view

view组件是很常用的一个标签

  <view class="section">
      <view>视图容器</view>
    </view>

1.2 button组件
button组件在微信官方API中属性表单组件的一部分。通过小程序提供的样式属性就可以实现基本的按钮样式。
“`

按钮默认
迷你尺寸
primary样式按钮
type=warn样式按钮
disabled样式按钮
loading样式按钮


重置

primary样式按钮

> 注意：hover-class实际也是一个class名字，小程序默认给它的样式是{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}。我们可以通过对hover-class值所对应的类名来进行点击时对默认样式的修改

####1.3 icon 列表

> 小程序中封装了一些常用的图标icon。有三个属性可以对icon样式进行设置：
> type:icon类型，有效值有success, success_no_circle, info, warn, waiting, cancel, download, search, clear
> size：单位px
> color:与css的color值一致

<view class="section">
  <icon type="success"></icon>
  <icon type="info"></icon>
  <icon type="warn"></icon>
  <icon type="waiting"></icon>
  <icon type="cancel" bindtap="showme"></icon>
</view>

“`

1.4 image组件

在小程序中，可以通过image组件的mode属性控制图片的显示
mode共有13种模式，其中有4种缩放模式，9种裁剪模式
1）、缩放模式（当图片宽高与设定的image宽高不一致时）
scaleToFill:不保持纵横比缩放图片，使图片拉伸至填满image元素
aspectFit:保持纵横比缩放，使长边完全填满图片
aspectFill：保持纵横比缩放，使短边完全显示出来
widthFix:宽度不变，高度自动变化，保持原图宽高比不变
2)、裁剪模式
当图片超出image设定的宽高时所做的处理
top:不缩放图片，只显示图片的顶部区域
bottom:不缩放图片，只显示图片的底部区域
center:不缩放图片，只显示图片的中间区域
left 不缩放图片，只显示图片的左边区域
right 不缩放图片，只显示图片的右边区域