前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序开发实战(7):Button组件详解

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

作者头像
蒙娜丽宁
发布2020-07-10 18:04:07
1.9K0
发布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 的设置为

代码语言:javascript
复制
{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属性,用来指定按钮按下时的样式名称。

代码语言:javascript
复制
<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样式的代码如下:

代码语言:javascript
复制
.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实现代码。

代码语言: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 删除

本文分享自 极客起源 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档