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

谁借莪１个温暖的怀抱￠ 2023-02-25 02:10 10阅读 0赞

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

李宁老师已经在「极客起源」 微信公众号推出《微信小程序开发实战》系列文章，包括了小程序开发的所有核心技术，读者可以在公众号中输入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-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>
    
    <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所示。

![format_png][]

图1  按钮演示效果

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

![format_png 1][]

图2 按钮size设为mini的效果

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

![format_png 2][]

图3 将按钮禁用的效果

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

![format_png 3][]

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

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

![format_png 4][]

图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）：容器组件][1]

[微信小程序开发实战（2）：添加广告轮询图][2]

[微信小程序开发实战（3）：条件渲染][3]

[微信小程序开发实战（4）：列表渲染][4]

[微信小程序开发实战（5）：组件复用利器-模板][5_-]

[微信小程序开发实战（6）：基础组件（text、icon和progress）][6_text_icon_progress]

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

![format_png 5][]

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

![format_png 6][]

[format_png]: /images/20230209/cc206ab870814d6ca3e2815c913432c9.png
[format_png 1]: /images/20230209/0c7b56dc57c64f3fa21c4ecd5615b748.png
[format_png 2]: /images/20230209/91e92da8ade249fd836014009d0498b7.png
[format_png 3]: /images/20230209/c26cf5e32bc34111be64bb64660441c8.png
[format_png 4]: /images/20230209/e0c80973f54e4351a4af633bd027b1dc.png
[1]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd6902b58a1e8ba3cdf5cbef243ca7d238fcb69a2fad8e6056afe18d08787d5413393fc7b5eb&idx=1&mid=2651364419&scene=21&sn=4f08ee94682f107f54b2dc81474fd20c#wechat_redirect
[2]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd6902888a1e8b9e6daa10d07e4c20ebdbaf0a1358c84300a697c3b126a2600a84bc89b8d4f1&idx=1&mid=2651364478&scene=21&sn=3196017aab20e51f5d23f68ab463403f#wechat_redirect
[3]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd69025f8a1e8b496460cb42ecfbddf1545333f47ffc225ef5c6b568bda1696486ba11534f66&idx=1&mid=2651364521&scene=21&sn=50cf1c358c636f01f4ab8903fbe15578#wechat_redirect
[4]: https://blog.csdn.net/nokiaguy/article/details/107218878
[5_-]: https://blog.csdn.net/nokiaguy/article/details/107218880
[6_text_icon_progress]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd6903018a1e8a1759f9e327f56247d374513bcca93b53affca96ffc2f60da2513a1aca76a32&idx=1&mid=2651364855&scene=21&sn=1633e82e25441596c052eee6f4b0501c#wechat_redirect
[format_png 5]: /images/20230209/79baa63b41f146b3909cc3533e1d4014.png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9VT2ljQmljZDl4dG4yVTN6Z0ppYzBiQ2JJeDVmNkpjSWljUUx0aWJyOVB0RDNiVWhrT3pLNkxqUENoeDAxb0VjSmdKNEVEMGJoN1R6TzJkaDBoNUxMWDY1Zk93LzY0MA?x-oss-process=image/format,png