微信小程序開發之組件表單用法

1,button用法

<view class="page-body">
  <view class="btn-area" id="buttonContainer">
    <button type="primary">頁面主操作 Normal</button>
    <button type="primary" loading="true">頁面主操作 Loading</button>
    <button type="primary" disabled="true">頁面主操作 Disabled</button>

    <button type="default">頁面次要操作 Normal</button>
    <button type="default" disabled="true">頁面次要操作 Disabled</button>

    <button type="warn">警告類操作 Normal</button>
    <button type="warn" disabled="true">警告類操作 Disabled</button>

    <view class="button-sp-area">
      <button type="primary" plain="true">按鈕</button>
      <button type="primary" disabled="true" plain="true">不可點擊的按鈕</button>

      <button type="default" plain="true">按鈕</button>
      <button type="default" disabled="true" plain="true">按鈕</button>

      <button class="mini-btn" type="primary" size="mini">按鈕</button>
      <button class="mini-btn" type="default" size="mini">按鈕</button>
      <button class="mini-btn" type="warn" size="mini">按鈕</button>
    </view>
  </view>
</view>

2,checkbox多選框用法

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-gap">
      <view class="page-section-title">默認樣式</view>
      <label class="checkbox">
        <checkbox value="cb" checked="true"/>選中
      </label>
      <label class="checkbox">
        <checkbox value="cb" />未選中
      </label>
    </view>

3,form 表單用法

表單。將組件內的用戶輸入的switch input checkbox slider radio picker 提交。當點擊 form 表單中 form-type 爲 submit 的 button 組件時,會將表單組件中的 value 值進行提交,需要在表單組件中加上 name 來作爲 key。

<view class="container">
  <view class="page-body">
    <form catchsubmit="formSubmit" catchreset="formReset">
      <view class="page-section page-section-gap">
        <view class="page-section-title">switch</view>
        <switch name="switch"/>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">radio</view>
        <radio-group name="radio">
          <label><radio value="radio1"/>www.cnmibee.com</label>
          <label><radio value="radio2"/>選項二</label>
        </radio-group>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">checkbox</view>
        <checkbox-group name="checkbox">
          <label><checkbox value="checkbox1"/>選項一</label>
          <label><checkbox value="checkbox2"/>選項二</label>
        </checkbox-group>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">slider</view>
        <slider value="50" name="slider" show-value ></slider>
      </view>

      <view class="page-section">
        <view class="page-section-title">input</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <view class="weui-cell__bd" style="margin: 30rpx 0" >
              <input class="weui-input" name="input" placeholder="這是一個輸入框" />
            </view>
          </view>
        </view>
      </view>

      <view class="btn-area">
        <button style="margin: 30rpx 0" type="primary" formType="submit">Submit</button>
        <button style="margin: 30rpx 0" formType="reset">Reset</button>
      </view>
    </form>
  </view>

</view>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章