小程序：button--checkbox--image--input

button

<!-- type样式 -->
<!-- plain镂空 -->
<!-- disabled禁止使用 -->
<!-- loading加载 -->
<view>
<button size="mini">button</button>
<button size="mini" type="defult">button</button>
<button size="mini" type="primary">button</button>
<button size="mini" type="warn">button</button>
<button size="mini" type="warn" plain = "true">button</button>
<button size="mini" type="warn" disabled="true">button</button>
<button size="mini" type="warn" loading="true">button</button>
</view>

checkbox

<!-- value 触发事件的标识，当这个框被选中时会返回标识给组 -->
<!-- <checkbox />这种格式只能点击选着框选择 -->
<!-- <checkbox></checkbox>这种格式点击文本同样可以选择 -->
<checkbox-group >
  <checkbox value="vchina"/>china
  <checkbox value="vchina" disabled="true"/>usa
  <checkbox value="vchina" color="red" checked="true"/>uk
</checkbox-group>

<!-- view竖排排序 -->
<!-- label横排排序 -->
<checkbox-group>
  <label wx:for = "{{array}}">
    <checkbox id="{{item.id}}" value='{{item.value}}' checked='{{item.checked}}' color="{{item.color}}      "disabled="{{item.disable}}"/>{{item.name}}
  </label>
</checkbox-group>

<!-- 在label中for指定checkbox的id，点击此label时可选中checkbox -->
<label for="1001">tap china icon</label>

js

Page({
  data:{
    array:[
      { id: 1001,value: "china", name: "china", disable: false, color: "red", checked: true},
      { id:1002,value: "usa", name: "usa", disable: true, color: "blue", checked: false},
      { id:1003,value: "uk", name: "uk", disable: true, color: "pink", checked: false}
    ]
  }
})

image

<block wx:for ="{{array}}">
<image mode="{{item.mode}}" src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" lazy-load="true" bindload="load"></image>
<text>{{item.text}}</text>
</block>
<!-- lazy-load逐步加载 -->

js

Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
    }, {
      mode: 'aspectFit',
      text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
    }, {
      mode: 'aspectFill',
      text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
    }, {
      mode: 'top',
      text: 'top：不缩放图片，只显示图片的顶部区域'
    }, {
      mode: 'bottom',
      text: 'bottom：不缩放图片，只显示图片的底部区域'
    }, {
      mode: 'center',
      text: 'center：不缩放图片，只显示图片的中间区域'
    }, {
      mode: 'left',
      text: 'left：不缩放图片，只显示图片的左边区域'
    }, {
      mode: 'right',
      text: 'right：不缩放图片，只显示图片的右边边区域'
    }, {
      mode: 'top left',
      text: 'top left：不缩放图片，只显示图片的左上边区域'
    }, {
      mode: 'top right',
      text: 'top right：不缩放图片，只显示图片的右上边区域'
    }, {
      mode: 'bottom left',
      text: 'bottom left：不缩放图片，只显示图片的左下边区域'
    }, {
      mode: 'bottom right',
      text: 'bottom right：不缩放图片，只显示图片的右下边区域'
    }],
    src: '../resources/cat.jpg'
  },
  imageError: function (e) {
    console.log('image3发生error事件，携带值为', e.detail.errMsg)
  },
  load:function(e){
    console.log(e)
  }
})

input

<!-- value输入栏默认显示的文本 -->
<!-- type输入类型 默认text， number， idcard，digit -->
<!-- password boolean密码类型 -->
<!-- placeholder 当输入框没有内容时显示的文本 -->
<!-- placeholder-style="color: green"颜色 -->
<!-- placeholder-class=""添加样式类 -->
<!-- disable -->
<!-- maxlength 最大输入长度，-1不限制 -->
<!-- cursor-spacing 输入框距键盘距离 -->
<!-- focus自动对焦 -->
<!-- confirm-type 设置键盘右下角文字 done send search next go -->
<!-- confirm-hold 保持键盘不收起 -->
<!-- cursor设置光标位置，在一行文本的位置 -->
<!-- selection-start ，selection-end 文本选择位置 -->
<!-- bindinput键盘输入时触发事件 -->
<!-- bindfocus对焦时  -->
<!-- bindblur失焦时 -->
<!-- bindconfirm按下完成按钮时 -->
<input value="learn program" type="text" confirm-type="next" selection-start="1" selection-end= "3" focus="true" bindfocus="focus" bindblur="blur" bindconfirm="confirm" bindinput="input"></input>
<input value="learn program" type="number"></input>
<input value="learn program" type="idcard"></input>
<input value="learn program" type="digit"></input>
<input value="password" type="number" password="true"></input>
<input type="number" placeholder="input your password" placeholder-style="color: green"></input>
<input type="number" placeholder="input your password" placeholder-class="placeholder"></input>

js

Page({
  input:function(){
    console.log("input")
  },
  focus:function(){
    console.log("focus")
  },
  blur:function(){
    console.log("lose focus")
  },
  confirm:function(){
    console.log("confirm")
  }
})