button 按钮组件
配合官方文档一起使用，效果更佳 —— 传送门
一、button 组件初体验button 通过简单的一行即可实现如下效果<button>按钮</button>
是不是很简单？
接下来我给大家一一介绍 button 的常用属性
2.1 size —— button 的大小
size 有两个属性值：
- default，也就是默认的，也就是上面看到的
- mini，一个缩小版的按钮
index.wxml
<button size='mini'>按钮</button>
2.2 type —— button 的类型
type 有三个属性值
2.2.1 primary 绿色的按钮，也就是我们最常见的
<button size='mini' type="primary">按钮</button>
后面就只展示效果，就不再放置代码了，如有特殊情况，我会再慢慢列举出来
2.2.2 default —— 默认属性
2.2.3 warn —— 警告
2.3 三个布尔值属性
- plain 颜色反转标签
- disabled 按钮禁用组件
- loading 按钮加载组件
2.3.1 plain
颜色反转的一个属性
原图：
效果图：
2.3.2 disabled
按钮禁用
2.3.3 loading
加载，转圈圈
2.4 点击效果
效果不是很好展示，就不放图了，自行尝试即可
2.4.1 hover-start-time 点击产生效果的时间
以毫秒为单位，
2.4.2 hover-stay-time 取消点击响应的时间
以毫秒为单位
2.5 form-type
用于表单 form，点击会出发 submit（提交） 和 reset（重置） 事件
这个时候就给大家介绍一个简单的案例，通过 form 表单实现简单的登录功能
wxml 文件
<form bindsubmit="onSubmitEvent">
<view>
账号:<input name='username' placeholder="请输入账号"></input>
</view>
<view>
密码:<input name='password' password placeholder="请输入密码"></input>
</view>
<!-- 登录匹配，会对后台js 中给定的账号密码进行匹配-->
<button form-type="submit" type="primary">登录</button>
<!-- 清除输入的数据，比如用户输入的账号密码 -->
<button form-type="reset">取消</button>
</form>
js 文件
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
//这里和 form 绑定了一个 提交事件，用户输入的数据会进入到js文件中进行对比匹配
onSubmitEvent:function(event){
var value = event.detail.value;
var username = value.username;
var password = value.password;
if( username === 'aaa' && password === '111111'){
//登录成功会进行页面跳转
wx.navigateTo({
url: '/pages/index/index',
})
}else{
console.warn("账号或者密码错误");
}
效果图如下：
请自行尝试
