微信小程式-表單

wxml

<view>
按鈕：
<button size="{{buttom.size}}" type="{{buttom.type}}"  plain="{{buttom.plain}}"  disabled="{{buttom.disabled}}"  loading="{{buttom.loading}}"  >例項按鈕</button>
</view>
<view>
<button bindtap="setSize" size="mini" type="primary" plain="{{true}}" >改變大小</button>
<button bindtap="setType"  size="mini" type="warn" plain="{{false}}" >改變樣式</button>
<button  bindtap="setLoading"  size="mini" type="warn" plain="{{true}}" >帶loading</button>
<button bindtap="setDisabled"  size="mini" type="default" plain="{{false}}" >禁用按鈕</button>
<button bindtap="setPlain"  size="mini" type="default" plain="{{false}}" >改變背景</button>
</view>

<view>
多選框：
<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}"/>{{item.value}}
  </label>
</checkbox-group>
</view>

<view>
form：
可以提交 switch input checkbox slider radio picker  標籤
<form bindsubmit="formSubmit" bindreset="onreset" id='a2'>
  <view class="section section_gap">
    <view class="section__title">switch</view>
    <switch name="switch"/>
  </view>
  <view class="section section_gap">
    <view class="section__title">slider</view>
    <slider name="slider" show-value ></slider>
  </view>

  <view class="section">
    <view class="section__title">input</view>
    <input name="input" placeholder="please input here" />

     <input name="input2" type="number" placeholder="please input here" />

      <input name="input3"  type="idcard" placeholder="please input here" />

       <input name="input4" type="digit" placeholder="please input here" />

       <input name="input4" type="date" placeholder="please input here" />

       <input name="input4" type="time" placeholder="please input here" />
  </view>
  <view class="section section_gap">
    <view class="section__title">radio</view>
    <radio-group name="radio-group">
      <label><radio value="radio1"/>radio1</label>
      <label><radio value="radio2"/>radio2</label>
    </radio-group>
  </view>
  <view class="section section_gap">
    <view class="section__title">checkbox</view>
    <checkbox-group name="checkbox">
      <label><checkbox value="checkbox1"/>checkbox1</label>
      <label><checkbox value="checkbox2"/>checkbox2</label>
    </checkbox-group>
  </view>
  <view class="btn-area">
    <button formType="submit">Submit</button>
    <button formType="reset"  >Reset</button>
  </view>
</form>
 表單提交的資料：{{formdata}}
</view>
<view class="section">
  <view class="section__title">地區選擇器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      當前選擇：{{array[index]}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">時間選擇器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      當前選擇: {{time}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">日期選擇器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      當前選擇: {{date}}
    </view>
  </picker>
</view>

js

var type=["primary","default","warn"];
var app = getApp()
var pageObject = {
  data: {
         array: ['美國', '中國', '巴西', '日本'],
    index: 0,
    date: '2016-09-01',
    time: '12:01',
        formdata:'',
   items: [
      {name: 'USA', value: '美國'},
      {name: 'CHN', value: '中國', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本',disabled:'false'},
      {name: 'ENG', value: '英國'},
      {name: 'TUR', value: '法國'},
    ],
     buttom:{size:"default","type":"default","plain":false,"disabled":false,"loading":false}
  },
  //改變大小
  setSize:function (e){
  
      if(this.data.buttom.size=="mini"){
            this.data.buttom.size="default";
      }else{
            this.data.buttom.size="mini";  
      }
  this.setData({
           buttom:this.data.buttom
        })
  },
  //改變樣式
   setType:function (e){
   
      var key=app.getRandomNum(0,2);
      this.data.buttom.type=type[key];
      this.setData({
              buttom:this.data.buttom
        })
  },
  //設定loading
  setLoading:function (e){
       this.data.buttom.loading=!this.data.buttom.loading
      this.setData({
              buttom:this.data.buttom
        })
  },
  //設定禁用按鈕
  setDisabled:function (e){
       this.data.buttom.disabled=!this.data.buttom.disabled
      this.setData({
              buttom:this.data.buttom
        })
  },
  //設定背景
  setPlain:function (e){
           this.data.buttom.plain=!this.data.buttom.plain
            this.setData({
              buttom:this.data.buttom
        })
  },
  //選擇多選框的時候觸發
   checkboxChange: function(e) {
        var number = '選擇了'+e.detail.value.length.toString()+'個';
           var obj = {title:number,icon: 'success',duration: 1000};
            wx.showToast(obj)
 },
  //重置表單
  onreset: function(e) {
           
wx.showToast({
  title:'重置表單成功',
  icon: 'success',
  duration: 1000
})
  },
  //點選提交是觸發
  formSubmit:function (e){
         console.log(e.detail.value)
var a = e.detail.value;
        this.setData({
            formdata:a
        })
  }
}
Page(pageObject);