button 按钮组件



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

一、button 组件初体验

​button​ 通过简单的一行即可实现如下效果

​​<button>按钮</button>​​

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

是不是很简单？

二、button 组件常用属性

接下来我给大家一一介绍 button 的​常用属性​

2.1 size —— button 的大小

​size​ 有两个属性值：


  • default，也就是默认的，也就是上面看到的
  • mini，一个缩小版的按钮

index.wxml

<button size='mini'>按钮</button>

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

2.2 type —— button 的类型

​type​ 有三个属性值

2.2.1 primary 绿色的按钮，也就是我们最常见的
<button size='mini' type="primary">按钮</button>

后面就只展示效果，就不再放置代码了，如有特殊情况，我会再慢慢列举出来

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

2.2.2 default —— 默认属性

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

2.2.3 warn —— 警告

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

2.3 三个布尔值属性


  2. plain 颜色反转标签
  3. disabled 按钮禁用组件
  4. loading 按钮加载组件

2.3.1 plain


颜色反转的一个属性


原图：

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

效果图：

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

2.3.2 disabled


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


2.3.3 loading

加载，转圈圈

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

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("账号或者密码错误");
    }

效果图如下：

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

请自行尝试