微信小程序开发手记之五：组件

icon

---

icon组件有3个属性，如下：

• type，可选值：success, success_no_circle, info, info_circle，warn, waiting, cancel, download, search, clear
• color，如#C9C9C9。
• size，默认为23px。

先看一张效果图：

再看具体的wxml和wxss。

<view class="demo-view-4">
    <view class="view-1">
        <icon class = "margin" type="circle" />
        <view class="margin">circle：多选未选中</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="success" />
        <view class="margin">success：成功或已选中</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="success_no_circle" />
        <view class="margin">success_no_circle：单选已选中</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="info" />
        <view class="margin">info：信息提示</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="warn" color="#C9C9C9" />
        <view class="margin">warn-#C9C9C9：普通警告</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="warn" />
        <view class="margin">warn：强烈警告</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="waiting" />
        <view class="margin">waiting：等待</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="download" />
        <view class="margin">download：可下载</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="info_circle" />
        <view class="margin">info_circle：有信息提示</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="cancel" />
        <view class="margin">cancel：停止或关闭</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="search" />
        <view class="margin">search：搜索</view>
    </view>

    <view class="view-1">
        <icon class = "margin" type="clear" />
        <view class="margin">clear：删除</view>
    </view>

    <view class="view-1">
        <view class="margin">PS:每个type都可以设置颜色(color),大小(size)</view>

    </view>


</view>

.demo-view-4{
    display:flex;
    height: 100%;
    flex-direction: column;
}

.view-1{
    display:flex;
    height: 100%;
    flex-direction: row;
}

.margin{
    margin: 20rpx;
}

text

---

效果图如下：

wxml如下：

<text>My name is wisely。\n I am a Androider！</text>

progress

---

progress组件的属性如下：

属性名	类型	默认值	说明
percent	Float	无	百分比0~100
show-info	Boolean	false	在进度条右侧显示百分比
stroke-width	Number	6	进度条线的宽度，单位px
color	Color	#09BB07	进度条颜色 （请使用 activeColor）
activeColor	Color		已选择的进度条的颜色
backgroundColor	Color		未选择的进度条的颜色
active	Boolean	false	进度条从左往右的动画

效果图如下：

<view class="demo-view-4">

    <progress class = "margin" percent="60" show-info/>

    <progress class = "margin" percent = "80" active activeColor = "pink"/>

    <progress class = "margin" percent="40" stroke-width="12" backgroundColor = "black"/>
</view>

.demo-view-4{
    display:flex;
    height: 100%;
    flex-direction: column;
}

.margin{
    margin: 20rpx;
}

button

---

button组件的属性如下

属性名	类型	默认值	说明
size	String	default	有效值 default, mini
type	String	default	按钮的样式类型，有效值 primary, default, warn
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标
form-type	String	无	有效值：submit, reset，用于 组件，点击分别会触发 submit/reset 事件
open-type	String	无	有效值：contact，打开客服会话
hover-class	String	button-hover	指定按钮按下去的样式类。当
hover-start-time	Number	20	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	70	手指松开后点击态保留时间，单位毫秒

先来看效果图：

Page({
  data:{
    "defaultSize":"default",
    "primarySize":"default",
    "warnSize":"default",
    "plain":false,
    "loading":false,
    "disabled":false
  },
  setPlain:function(){
   
      this.setData({
        "plain":!this.data.plain
      })
  },
  setLoading:function(){
   
      this.setData({
        "loading":!this.data.loading
      })
  },
  setDisabled:function(){
   
      this.setData({
        "disabled":!this.data.disabled
      })
  }
})

再来看wxml

<view class="demo-view-4">
    <button class="margin" type="default" size="{
    {defaultSize}}" plain="{
    {plain}}" loading="{
    {loading}}" disabled="{
    {disabled}}">default</button>

    <button class="margin" type="primary" size="{
    {primarySize}}"plain="{
    {plain}}" loading="{
    {loading}}" disabled="{
    {disabled}}">primary</button>

    <button class="margin" type="warn" size="{
    {warnSize}}" plain="{
    {plain}}" loading="{
    {loading}}" disabled="{
    {disabled}}">warn</button>

    <button class = "margin" bindtap="setPlain">设置是否镂空（plain属性）</button>

    <button class="margin" bindtap="setLoading">设置是否显示进度圈(loading属性)</button>

    <button class="margin" bindtap="setDisabled">设置是否可用(disabled属性)</button>

</view>

.demo-view-4{
    display:flex;
    height: 100%;
    flex-direction: column;
}

.margin{
    margin: 20rpx;
}

checkbox

checkbox是放在checkbox-group中使用的，checkbox-group内部可以有多个checkbox，它的属性如下

属性名	类型	默认值	说明
bindchange	EventHandle		中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

checkbox的属性如下

属性名	类型	默认值	说明
value	String		标识，选中时触发的 change 事件，并携带 的 value
disabled	Boolean	false	是否禁用
checked	Boolean	false	当前是否选中，可用来设置默认选中
color	Color		checkbox的颜色，同css的color，比如：color=”#FF0000”，可以将框内的对勾颜色设置为红色

运行效果图如下：

Page({
  data:{

    items:[
      {
  "name":"china","value":"中国","checked":true},
      {
  "name":"US","value":"英国","checked":false},
      {
  "name":"USA","value":"美国","checked":false}
    ]
  },
  checkboxChanage:function(e){
   
      console.log(e.detail.value)
  }
})

<checkbox-group class="demo-view-4" bindchange="checkboxChanage">

    <label wx:for="{
    {items}}">
        <checkbox class = "margin" value="{
    {item.name}}" checked="{
    {item.checked}}" >{
  {item.value}}