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

---------支持作者请转发本文-----------

李宁老师已经在「极客起源」 微信公众号推出《微信小程序开发实战》系列文章，包括了小程序开发的所有核心技术，读者可以在公众号中输入138271，通过历史文章查看。

-----------正文-----------

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- 时，没有点击态效果

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">    defaultbutton><button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" >    primarybutton><button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}">    warnbutton><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)

往期回顾：微信小程序开发实战(1)：容器组件微信小程序开发实战(2)：添加广告轮询图微信小程序开发实战(3)：条件渲染微信小程序开发实战(4)：列表渲染微信小程序开发实战(5)：组件复用利器-模板微信小程序开发实战(6)：基础组件(text、icon和progress)对本文感兴趣，可以加李宁老师微信公众号( unitymarvel)：

关注  极客起源  公众号，获得更多免费技术视频和文章。