专栏首页极客起源小程序开发实战(7):Button组件详解

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

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)

本文分享自微信公众号 - 极客起源(geekculture),作者:geekori

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序开发实战(2):添加广告轮询图

    在很多App的首页顶端都会有一个广告轮询视图(大多数App都在这个位置),轮询广告至少是3页。通常轮询广告下方中心的位置是若干个小点(有的可能是其他效果,如横杠...

    蒙娜丽宁
  • 还不知道区块链的用处?那就out了!

    区块链技术已经从单纯的技术探讨走向了应用落地的阶段。国内外已经出现大量与之相关的企业和团队。有些企业已经结合自身业务摸索出了颇具特色的应用场景,更多的企业还处于...

    蒙娜丽宁
  • Python编程思想(26):成员变量

    李宁老师已经在「极客起源」 微信公众号推出《Python编程思想》电子书,囊括了Python的核心技术,以及Python的主要函数库的使用方法。读者可以在「极客...

    蒙娜丽宁
  • Python爬虫入门教程 49-100 Appium安装+操作51JOB_APP(模拟手机操作之一)

    在开始安装Appium之前,你要先知道Appium是做什么的?Appium 是一个自动化测试开源工具,看到没,做测试用的,它有点类似Selenium,可以自动操...

    梦想橡皮擦
  • B4A 配置第三方夜神安卓模拟器以调试应用

    模拟器或仿真设备是一个在PC上模拟真实设备的程序,在测试你的项目时它总是比使用真实设备要好一些.毕竟你可以随便改变分辨率以调整你的程序去适应不同的分辨率,使程序...

    巴西_prince
  • 如何在Debian 9上安装和配置Postfix作为仅发送SMTP服务器

    Postfix是一种邮件传输代理(MTA),一种用于发送和接收电子邮件的应用程序。在本教程中,您将安装和配置Postfix,以便它可以仅用于本地应用程序发送电子...

    八十岁的背影
  • 人在江湖

    截图中谈到的MVC是Asp.net MVC,三年前还在公司范围内做MVC培训,三年没接触后我已经差不多忘光了…

    IT晴天
  • 职能部门的需求

    用户2025931
  • 海豚扒问对话布比蒋海:洞察区块链的前世今生,遇见价值流通网络的未来

    海豚:很高兴邀请到布比创始人蒋海蒋总来参加我们海豚区块链的【海豚扒问】栏目第一期,采访蒋总我是很激动的,因为我曾经也在布比工作过,也是布比人,在布比的那段时间...

    海豚区块链
  • 投融资汇总|本周(12.2-12.8),谷歌罕见的在日本出手

    本周硬科技领域投融资事件一共45起,人工智能领域发生21起融资事件,占比46%;生物医药领域发生8起融资事件,占比18%;物联网领域发生6起融资事件和1起收购事...

    镁客网

扫码关注云+社区

领取腾讯云代金券