微信小程序学习（七）之button组件

一、效果

二、代码

<!--学习input组件-->
<view class="title">学习input组件</view>
<view class="student">2016/12/07 [e-mail]</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>