微信小程序按钮Button使用详解

谁借莪１个温暖的怀抱￠ 2023-10-07 17:29 28阅读 0赞

**最近在出微信小程序系列教程 顺手写了点博客 欢迎大家关注**

--------------------

button 用来实现按钮点击效果，本文章效果如下：  
![在这里插入图片描述][b7203f21f2794fa4b6c06fc92462b518.gif_pic_center]

##### 1 wxml 文件中 #####

在这里我就放了三个普通的按钮

<view class="content-btn-group">
    
      <button class="btn" bindtap="onDefaultButtonClick"> default 默认样式 </button>
    
      <button class="btn" bindtap="onDefaultButtonClick" type="primary"> primary 样式 </button>
    
      <button class="btn" bindtap="onDefaultButtonClick" type="warn"> warn 样式 </button>
      
    </view>

##### 2 wxss 样式文件中 #####

.content-btn-group{
        
      padding: 10px;
    }
    
    /**默认按钮点击 高亮样式**/
    .button-hover {
        
      background-color: red;
      color:#fff;
    }
    /** 添加自定义button点击态样式类**/
    .other-button-hover {
        
      background-color: blue;
    }
    .btn{
        
      margin-top: 16px;
    }

##### 3 js 文件中 #####

就是按钮的点击事件

Page({
        
    
      /**
       * 页面的初始数据
       */
      data: {
        
    
      },
     ... 其他函数方法... 
       
      onDefaultButtonClick: function () {
        
        console.log('点击事件')
      }
    })

##### 4 概述 #####

*  type 属性来配置按钮的基本显示样式 ，可以是 default、primary、warn
 *  plain 属性默认false ，表示按钮背景填充，为true时，背景不填充，只有边框文字
 *  size 用来配置按钮的大小 可取值为 mini、default

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]

--------------------

小编也写了几本书，如果你有兴趣可以去看看

*  [手机点击查看][Link 1] \# [电脑点击查看][Link 2]  
    ![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]

--------------------

*  [手机点击查看][Link 3] \# [电脑点击查看][Link 4]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

[b7203f21f2794fa4b6c06fc92462b518.gif_pic_center]: https://img-blog.csdnimg.cn/b7203f21f2794fa4b6c06fc92462b518.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e8d15919d7274b72b6ea94ddd1618652.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 1]: https://m.tb.cn/h.f6IsZcl?sm=b5555a
[Link 2]: https://detail.tmall.com/item.htm?id=658886049139
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ed9ecf4aacc84e5cb17d5b486e431083.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 3]: https://item.m.jd.com/product/10040957873690.html?&utm_source=iosapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=CopyURL&ad_od=share&utm_user=plusmember&gx=RnFjxjUIbWGNztQUp4J3XrJgfXzlaNZ0
[Link 4]: https://item.jd.com/13009851.html
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/0b0016200df2484aa2029c1b20224fee.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center