小程序开发实战（7）：Button组件详解

蒙娜丽宁

发布于 2020-07-10 18:04:07

1.8K0

发布于 2020-07-10 18:04:07

文章被收录于专栏：极客起源极客起源

button组件是最常用的表达组件，用于响应点击动作。该组件有如下几个属性。

size：String类型，默认值是default，除了default，还可以设置为 mini
type：String类型，默认值是default，设置按钮的样式类型，可设置的值包括 primary, default, warn
plain：Boolean类型，默认值是false，设置按钮是否镂空，背景色透明
disabled：Boolean类型，默认值是false，设置按钮是否禁用
loading：Boolean类型，默认值是false，设置按钮标题前是否带显示loading 图标
form-type ：String类型，没有默认值，可以设置的值包括submit和 reset，用于 form组件，点击分别会触发 submit/reset 事件，该属性会在介绍form组件时详细讲解
hover-class：String类型，默认值是button-hover，指定按钮按下去的样式名称。当 hover-class="none" 时，没有点击态效果

button-hover 的设置为

{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

下面的布局代码详细描述了上述大多数属性的用法（除了form-type外）。在这段布局文件中，放置了6个button组件，其中前三个演示了3种按钮类型：default、primary和warn。并通过defaultSize、loading、plain和disabled变量分别对size、loading、plain和disabled属性进行控制。第一个按钮点击响应了default方法，用来设置按钮的size属性（在default和mini之间切换）。

点击后三个按钮分别响应setDisabled、setPlain和setLoading方法，分别设置前三个按钮的disabled、plain和loading属性。第4个按钮设置了hover-class属性，用来指定按钮按下时的样式名称。

<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="default">
    default
</button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" >
    primary
</button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}">
    warn
</button>
<!--  通过hover样式改变了第4个按钮按下的效果 -->
<button hover-class="hover" bindtap="setDisabled">点击设置以上按钮disabled属性</button>
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
<button bindtap="setLoading">点击设置以上按钮loading属性</button>

其中hover样式的代码如下：

.hover
{
    background-color: #F00;
    opacity: 0.3;
    font-size: 30px;
}

布局的效果如图1所示。

图1 按钮演示效果

当点击default按钮后，会设置size属性值为mini，效果如图2所示。

图2 按钮size设为mini的效果

图3是将前3个按钮禁用的效果。

图3 将按钮禁用的效果

图4是将按钮设为镂空的效果。

图4 将按钮设为镂空的效果

图5是在按钮标题文本前加loading动画的效果。

图5 按钮标题文本前加loading动画的效果

下面是完整的JavaScript实现代码。

var pageObject = {
  data: {
    defaultSize: 'default',
    primarySize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false
  },
  setDisabled: function(e) {
    this.setData({
      disabled: !this.data.disabled
    })
  },
  setPlain: function(e) {
    this.setData({
      plain: !this.data.plain
    })
  },
  setLoading: function(e) {
    this.setData({
      loading: !this.data.loading
    })
  } ,
  default:function(e)
  {
    this.setData(
      {
        defaultSize:this.data['defaultSize']=='default' ? 'mini' : 'default'
      }
    )
  }
}
 
Page(pageObject)

本文参与?腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-07-09，如有侵权请联系?cloudcommunity@tencent.com 删除

css