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

santu1年前 (2023-02-09)微信小程序275

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

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


相关文章

微信小程序:tdesign组件库的使用

微信小程序:tdesign组件库的使用

新建终端npm initnpm i tdesign-miniprogram -S --production构建npm修改app.json=>删除...

微信小程序:自定义组件触发父级页面事件

微信小程序:自定义组件触发父级页面事件

一、自定义组件定义如下:1. js文件Component({     var app = this   &...

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

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

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