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

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

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

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


相关文章

微信小程序:setData函数

微信小程序:setData函数

在小程序中经常会用到setData函数把变量渲染到视图层,为什么不直接赋值呢?下面来详细了解一下setData是小程序开发中使用最频繁的接口,界面几乎所有变量都要用到它setData函数用于将逻辑层的...

微信小程序:获取用户手机号码

微信小程序:获取用户手机号码

微信小程序可以直接获取用户绑定手机的号码,有几个问题需要注意:大前提,小程序的主体必须是非个人主体;非个人主体必须通过微信公众平台的第三方认证,这个认证是付费服务,300元/年;以上两个条件如果不符合...

微信小程序:API安全处理

微信小程序:API安全处理

前端发往后端的请求,要先经过RSA公钥加密处理,后端收到后使用公钥解密,防止数据被中途拦截修改·在线生成RSA密钥对:http://travistidwell.com/jsencrypt/demo/·...

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

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

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

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

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

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