微信小程序學習（七）之button組件

原創

2020-02-21 06:02

一、效果

二、代碼

<!--學習input組件-->
<view class="title">學習input組件</view>
<view class="student">2016/12/07 [email protected]</view>
<view>
    <text>
    1、type=primary,default,warn屬性可以理解爲微信自帶的三種按鈕樣式。
    2、form-type=submit,reset屬性用來定義是提交按鈕還是重置按鈕，會觸發submit/reset事件，如果不填寫則爲普通按鈕，自定義綁定事件。
    3、plain屬性用來定義是否爲透明背景按鈕，如果值爲true則只有外框。
    4、disabled屬性同Html5一樣使用。
    5、loading屬性用於實現類似網頁上異步提交時等待的交互效果。
    6、hover-class屬性用於定義按鈕按下去的樣式效果，通過class和hover-class屬性可以非常方便地定製出自己想要的按鈕樣式風格。
    \n</text>
</view>
<view class="section">默認按鈕效果：</view>
<view><button form-type="submit">提交</button></view>
<view class="section">type=primary按鈕效果：</view>
<view><button type="primary" form-type="submit">登錄</button></view>
<view class="section">type=warn按鈕效果：</view>
<view><button type="warn" form-type="submit">登錄</button></view>
<view class="section">plain=true背景透明按鈕效果：</view>
<view><button plain="true" form-type="submit">註冊</button></view>
<view class="section">loading按鈕效果：</view>
<view><button loading="true" type="primary" form-type="submit">提交中...</button></view>
<view class="section">disabled=true按鈕失效效果：</view>
<view><button disabled="true" type="primary" form-type="submit">綁定並登錄</button></view>
<view class="section">form-type=reset重置按鈕效果：</view>
<view><button form-type="reset">重置</button></view>
<view class="section">form-type=reset重置按鈕效果：</view>
<view><button class="vcstock" hover-class="vcstock-hover" form-type="submit">綁定並登錄</button></view>