微信小程序组件解读和分析:七、button按钮
2024-08-27 09:34:30
button按钮组件说明:
button,顾名思义,按钮,类似于html的button标签。我们可以设置按钮的属性,比如字体颜色大小,背景颜色等,可以给按钮绑定事件,用户点击时会触发事件。
button按钮组件示例代码运行效果如下:
下面是WXML代码:
[XML] 纯文本查看 复制代码
1
2
3
4
5
|
<!--index.wxml--> < view class = "content" > < text class = "con-text" >怎么飞?点击【按钮】即飞</ text > < button class = "con-button" >Fly</ button > </ view > |
下面是JS代码:
[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
Page({ data:{ }, onLoad: function (options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady: function (){ // 页面渲染完成 }, onShow: function (){ // 页面显示 }, onHide: function (){ // 页面隐藏 }, onUnload: function (){ // 页面关闭 } }) |
下面是WXSS代码:
[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
|
.content{ padding-top : 20px ; } .con-text{ display : block ; padding-bottom : 10px ; } .con-button{ margin-top : 10px ; color : black ; background-color : lightgreen } |
下面是WXML代码:
[XML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<!--index.wxml--> < view class = "content" > < view class = "con-top" > < text class = "text-decoration" >#按钮尺寸#</ text > < text class = "con-text" >mini:</ text > < button class = "con-button" size = "mini" >Fly</ button > < text class = "con-text" >default:</ text > < button class = "con-button" size = "default" >Fly</ button > </ view > < view class = "con-bottom" > < text class = "text-decoration" >#按钮类型#</ text > < text class = "con-text" >primary:</ text > < button class = "con-button" type = "primary" >Fly</ button > < text class = "con-text" >default:</ text > < button class = "con-button" type = "default" >Fly</ button > < text class = "con-text" >warn:</ text > < button class = "con-button" type = "warn" >Fly</ button > </ view > </ view > |
下面是JS代码:
[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
Page({ data:{ }, onLoad: function (options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady: function (){ // 页面渲染完成 }, onShow: function (){ // 页面显示 }, onHide: function (){ // 页面隐藏 }, onUnload: function (){ // 页面关闭 } }) |
下面是WXSS代码:
[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
.content{ padding-top : 20px ; width : 90% ; padding-left : 20px ; } .con-text{ display : block ; padding-bottom : 10px ; } .con-button{ color : black ; background-color : lightgreen; margin-bottom : 10px ; } .con- bottom { padding-top : 20px ; } .con- top { padding-bottom : 20px ; } .text-decoration{ color : blue ; display : block ; text-align : center ; } |
下面是WXML代码:
[XML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!--index.wxml--> < view class = "content" > < view class = "con-top" > < text class = "text-decoration" >#按钮是否镂空#</ text > < text class = "con-text" >镂空:</ text > < button class = "con-button" plain>本宝宝的背景被镂空了</ button > < text class = "con-text" >没镂空:</ text > < button class = "con-button" >我没有被镂空唉</ button > </ view > < view > < text class = "text-decoration" >#按钮是否禁用#</ text > < text class = "con-text" >禁用:</ text > < button class = "con-button" disabled>禁用</ button > < text class = "con-text" >没禁用:</ text > < button class = "con-button" >活跃</ button > </ view > < view class = "con-bottom" > < text class = "text-decoration" >#按钮前是否带loading图标#</ text > < text class = "con-text" >有loading:</ text > < button class = "con-button" loading>开车</ button > < text class = "con-text" >无loading:</ text > < button class = "con-button" >开车</ button > </ view > </ view > |
下面是JS代码:
[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
Page({ data:{ }, onLoad: function (options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady: function (){ // 页面渲染完成 }, onShow: function (){ // 页面显示 }, onHide: function (){ // 页面隐藏 }, onUnload: function (){ // 页面关闭 } }) |
下面是WXSS代码:
[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
.content{ padding-top : 20px ; width : 90% ; padding-left : 20px ; } .con-text{ display : block ; padding-bottom : 5px ; } .con-button{ color : black ; background-color : lightgreen; margin-bottom : 5px ; } .con- bottom { padding-top : 5px ; } .con- top { padding-bottom : 5px ; } .text-decoration{ color : blue ; display : block ; text-align : center ; } |
下面是WXML代码:
[XML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<!--index.wxml--> < view class = "content" > < text class = "text-decoration" >#按钮前是否带loading图标#</ text > < form class = "formstyle" bindsubmit = "formSubmit" bindreset = "formReset" > < view class = "shurustyle" > 输入: < input name = "username" class = "inputstyle" /> </ view > < view class = "buttonstyle" > < button form-type = "reset" class = "con-button" hover-class = "hoverbutton" >重置</ button > < button form-type = "submit" class = "con-button" hover-class = "hoverbutton" >提交</ button > </ view > </ form > </ view > |
下面是JS代码:
[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
Page({ data:{ }, onLoad: function (options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady: function (){ // 页面渲染完成 }, onShow: function (){ // 页面显示 }, onHide: function (){ // 页面隐藏 }, onUnload: function (){ // 页面关闭 }, formSubmit: function (e){ console.log(e.detail.value); }, formReset: function (e){ console.log(e.detail.value); } }) |
下面是WXSS代码:
[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
.content{ padding-top : 20px ; width : 90% ; padding-left : 20px ; } .con-button{ color : black ; background-color : lightgreen; margin-bottom : 5px ; } .text-decoration{ color : blue ; display : block ; text-align : center ; padding-bottom : 20px ; } .buttonstyle{ display : flex; flex- direction : row; padding-top : 20px ; } .inputstyle{ background-color : lightgray; width : 80% ; } .shurustyle{ padding-left : 15% ; } .hoverbutton{ background-color : lightgray; } |
下面是WXML代码:
[XML] 纯文本查看 复制代码
1
2
3
4
5
6
|
< view class = "content" > < view class = "con-top" > < text class = "text-decoration" >#按钮点击样式改变和绑定事件#</ text > < button class = "con-button" hover-class = "hoverclass" loading = "{{isloading}}" bindtap = "changeLoading" >loading</ button > </ view > </ view > |
下面是JS代码:
[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
Page({ data:{ isloading: true }, onLoad: function (options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady: function (){ // 页面渲染完成 }, onShow: function (){ // 页面显示 }, onHide: function (){ // 页面隐藏 }, onUnload: function (){ // 页面关闭 }, changeLoading: function (){ console.log( "loading status:" + this .data.isloading); var loadingstatus= this .data.isloading; this .setData({ isloading:!loadingstatus }) } }) |
下面是WXSS代码:
[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
.content{ padding-top : 20px ; width : 90% ; padding-left : 20px ; } .con-button{ color : black ; background-color : lightgreen; margin-top : 15px ; } .text-decoration{ color : blue ; display : block ; text-align : center ; font-family : "KaiTi" } .hoverclass{ background-color : orange; color : green ; font-size : 25px ; } |
button按钮的主要属性:
属性
|
类型
|
默认值
|
描述
|
size | String | default | 表示按钮的大小,有两个值:default和mini |
type | String | default | 表示按钮的样式类型,有三个值:default、primary和warn |
plain | Boolean | false | 表示按钮是否镂空,即背景是否被抹去,不写该属性则为false,写上该属性则为true,也可写成plain=”false” |
disabled | Boolean | false | 表示按钮是否被禁用,不写该属性则为false,写上该属性则为true,也可写成plain=”false” |
loading | Boolean | false | 表示按钮名称前是否有loading图标,不写该属性则为false,写上该属性则为true,也可写成plain=”false” |
form-type | String | 无 | 与form表单组件一起使用时,reset表示清空form表单内容事件,submit表示提交form表单内容事件,即有两个值:reset和submit |
hover-class | String | button-hover | 表示按钮被点击时的样式,可以自定义一个css,然后将hover-class指向这个css |
最新文章
- BOM之navigator、history、screen对象
- vs2015产品密钥
- 【树莓派】使用树莓派制作img镜像(二)
- OsmocomBB &;&; Motorora C118
- Leetcode#99	Recover Binary Search Tree
- Bzoj 3694: 最短路 树链剖分
- hdoj 1010 Tempter of the Bone【dfs查找能否在规定步数时从起点到达终点】【奇偶剪枝】
- Activity Threa创建Window和View分析
- 【LigerUI】ajax请求firefox返回NS_BINDING_ABORTED
- ExtJs4 笔记(5) Ext.Button 按钮
- Hibernate5-课程笔记2
- Yii config 配置
- Centos7 安装 tree
- Windows中使用ssh利用公钥登入远程服务器
- Learn to securely share files on the blockchain with IPFS!
- 【MSSQL】How can i see what IP address made the request to SQL Server?
- 异步Async
- 33)django-原生ajax,伪ajax
- day25-python操作redis一
- VM虚拟机装centos无法自动获取IP的解决方法
热门文章
- Android ImageLoader 本地缓存
- 3.myeclipse 8.5 m1 注册码
- Cg入门23: Fragment shader – UV动画(序列帧)
- 安装APK报错解决方法【转】
- 计算机学院大学生程序设计竞赛(2015’11)1005 ACM组队安排
- MARGIN-BEFORE MARGIN-AFTER MARGIN-START MARGIN-END
- idea新建springmvc+spring+mybaties项目2
- Java用户注册代码
- bzoj 1504 郁闷的出纳员
- 【POJ 1947】 Rebuilding Roads