微信小程序-表单

Posted 2020-08-19

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);