回复 刷新

暂无评论

小程序开发实战(7):Button组件详解

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

  1. size:String类型,默认值是default,除了default,还可以设置为 mini
  2. type:String类型,默认值是default,设置按钮的样式类型,可设置的值包括 primary, default, warn
  3. plain:Boolean类型,默认值是false,设置按钮是否镂空,背景色透明
  4. disabled:Boolean类型,默认值是false,设置按钮是否禁用
  5. loading:Boolean类型,默认值是false,设置按钮标题前是否带显示loading 图标
  6. form-type :String类型,没有默认值,可以设置的值包括submit和 reset,用于form组件,点击分别会触发 submit/reset 事件,该属性会在介绍form组件时详细讲解
  7. 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)
  • 4
  • 0
  • 0