微信小程序:Button按钮的用法

santu2年前 (2023-02-09)微信小程序931

在触屏手机上,不用按钮也可以直接触摸操作,

button控件主要是用来实现按钮点击效果,看起来更直观。

增加按钮,需要修改三个文件

1.wxml文件

    wxml文件相当于网页的html文件,语法也是基本一致的

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

2.wxss样式文件

    wxss样式文件相当于网页开发中的.css文件

    在其中增加content-btn-group样式

.content-btn-group{
  padding:10px;
}

3.js文件

    JavaScript文件,用来编写函数,这里要添加一个函数用来绑定按钮点击事件

onDefaultButtonClick(e){
console.log('按钮点击事件',e)
}

以上三步做完,一个简单的按钮就做好了。

4.概述

  • wxml中按钮的type属性用来配置按钮的显示样式,有primary,default,warn可选

  • plain 属性默认false ,表示按钮背景填充,为true时,背景不填充,只有边框文字

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


相关文章

微信小程序:页面跳转后去掉左上角的返回按钮

微信小程序:页面跳转后去掉左上角的返回按钮

跳转方式:wx.navigatorTo 【新页面打开,默认会有返回按钮】wx.redirectTo【当前页面打开,默认无返回按钮】wx.switchTab【只能用于跳转到tabbar页面,并关闭其他非...

微信小程序:组件的onLoad()实现

微信小程序:组件的onLoad()实现

onLoad()函数是页面加载时自动运行的,组件component使用另外一种方式达成同样的效果    // 组件生命周期声明对象(最重要的生命周期是...