手把手带你学习微信小程序 —— 十一 (button 按钮条组件微介绍)
2023-04-18 14:49:41 时间
button 按钮组件
配合官方文档一起使用,效果更佳 —— 传送门
一、button 组件初体验
button 通过简单的一行即可实现如下效果
按钮
是不是很简单?
二、button 组件常用属性
接下来我给大家一一介绍 button 的常用属性
2.1 size —— button 的大小
size 有两个属性值:
- default,也就是默认的,也就是上面看到的
- mini,一个缩小版的按钮
index.wxml
<button size='mini'>按钮button>
2.2 type —— button 的类型
type 有三个属性值
2.2.1 primary 绿色的按钮,也就是我们最常见的
<button size='mini' type="primary">按钮button>
后面就只展示效果,就不再放置代码了,如有特殊情况,我会再慢慢列举出来
2.2.2 default —— 默认属性
2.2.3 warn —— 警告
2.3 三个布尔值属性
- plain 颜色反转标签
- disabled 按钮禁用组件
- loading 按钮加载组件
2.3.1 plain
颜色反转的一个属性
原图:
效果图:
2.3.2 disabled
按钮禁用
2.3.3 loading
加载,转圈圈
2.4 点击效果
效果不是很好展示,就不放图了,自行尝试即可
2.4.1 hover-start-time 点击产生效果的时间
以毫秒为单位,
2.4.2 hover-stay-time 取消点击响应的时间
以毫秒为单位
2.5 form-type
用于表单 form,点击会出发 submit(提交) 和 reset(重置) 事件
这个时候就给大家介绍一个简单的案例,通过 form 表单实现简单的登录功能 wxml 文件
<form bindsubmit="onSubmitEvent">
<view>
账号:<input name='username' placeholder="请输入账号">input>
view>
<view>
密码:<input name='password' password placeholder="请输入密码">input>
view>
<button form-type="submit" type="primary">登录button>
<button form-type="reset">取消button>
form>
js 文件
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
//这里和 form 绑定了一个 提交事件,用户输入的数据会进入到js文件中进行对比匹配
onSubmitEvent:function(event){
var value = event.detail.value;
var username = value.username;
var password = value.password;
if( username === 'aaa' && password === '111111'){
//登录成功会进行页面跳转
wx.navigateTo({
url: '/pages/index/index',
})
}else{
console.warn("账号或者密码错误");
}
效果图如下:
请自行尝试
相关文章
- 一个Java程序员对2011年的回顾
- 大数据发展历程
- Android高级进阶之路【一】Android中View绘制流程浅析
- 可信服务管理(Trusted Service Manager)介绍
- GIS应用|快速开发REST空间分析服务
- 未来十年微软长盛不衰的两项战略
- 领域驱动设计模式的收益与挑战
- cocos 3.0 一键打包android平台应该注意的细节
- 数智化时代,驱动企业转型升级的“三驾马车”是什么?
- 基于MINA构建高性能的NIO应用
- 使用Rainbond实现离线环境软件交付
- 工作流引擎 jBPM 5.2 发布
- 微信小程序Minium自动化测试(三)
- 桌面应用抢先体验,这次有点料!
- 甲骨文Java专利遭拒 起诉Android侵权受挫
- 云计算的应用领域及发展前景
- Java效率真的很低吗?Android为何要采用?
- Android高级进阶之路【二】十分钟彻底弄明白 View 事件分发机制
- 庖丁解牛之-Android平台RTSP|RTMP播放器设计
- 手机直付,超级方便