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

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

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

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

1 wxml 文件中

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

  1. <view class="content-btn-group">
  3.   <button class="btn" bindtap="onDefaultButtonClick"> default 默认样式 </button>
  5.   <button class="btn" bindtap="onDefaultButtonClick" type="primary"> primary 样式 </button>
  7.   <button class="btn" bindtap="onDefaultButtonClick" type="warn"> warn 样式 </button>
  9. </view>
2 wxss 样式文件中
  1. .content-btn-group{
  3.   padding: 10px;
  4. }
  6. /**默认按钮点击 高亮样式**/
  7. .button-hover {
  9.   background-color: red;
  10.   color:#fff;
  11. }
  12. /** 添加自定义button点击态样式类**/
  13. .other-button-hover {
  15.   background-color: blue;
  16. }
  17. .btn{
  19.   margin-top: 16px;
  20. }
3 js 文件中

就是按钮的点击事件

  1. Page({
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  10.   },
  11.  ... 其他函数方法... 
  13.   onDefaultButtonClick: function () {
  15.     console.log('点击事件')
  16.   }
  17. })
4 概述
  • type 属性来配置按钮的基本显示样式 ，可以是 default、primary、warn
  • plain 属性默认false ，表示按钮背景填充，为true时，背景不填充，只有边框文字

  • size 用来配置按钮的大小 可取值为 mini、default

在这里插入图片描述

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

  • 手机点击查看 # 电脑点击查看
    请添加图片描述
  • 手机点击查看 # 电脑点击查看

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，77人围观）

还没有评论，来说两句吧...

相关阅读