手把手带你学习微信小程序 —— 十一 （button 按钮条组件微介绍）

配合官方文档一起使用，效果更佳 —— 传送门

一、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 三个布尔值属性

1. plain 颜色反转标签
2. disabled 按钮禁用组件
3. 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("账号或者密码错误");
    }

效果图如下：

请自行尝试