微信小程序组件解读和分析：七、button按钮

最新推荐文章于 2024-05-20 15:17:08 发布
最新推荐文章于 2024-05-20 15:17:08 发布
阅读量183 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/johnchai/p/6637440.html
版权

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按钮的主要属性：

 

属性
类型
默认值
描述
sizeStringdefault表示按钮的大小，有两个值：default和mini
typeStringdefault表示按钮的样式类型，有三个值：default、primary和warn
plainBooleanfalse表示按钮是否镂空，即背景是否被抹去，不写该属性则为false，写上该属性则为true，也可写成plain=”false”
disabledBooleanfalse表示按钮是否被禁用，不写该属性则为false，写上该属性则为true，也可写成plain=”false”
loadingBooleanfalse表示按钮名称前是否有loading图标，不写该属性则为false，写上该属性则为true，也可写成plain=”false”
form-typeString无与form表单组件一起使用时，reset表示清空form表单内容事件，submit表示提交form表单内容事件，即有两个值：reset和submit
hover-classStringbutton-hover表示按钮被点击时的样式，可以自定义一个css，然后将hover-class指向这个css

点击查看原文

转载于:https://www.cnblogs.com/johnchai/p/6637440.html

第八个猴子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序开发——点击按下时变色，松开后恢复（hover-class，或【：after】使用）
番薯大佬的专栏
02-13 7467
界面交互中，按下时改变颜色主是设置组件的hover-class属性的style样式值。 1、点击按下前，按下松开后样式 2、点击按下后样式 代码示例设置 wxml文件 <view class="cellstype" hover-class="cellhoverstyle" bindtap="itemclick" data-item="{{item}}"> wxss文件 .cellhoverstyle { color: red; } ...
微信小程序开发Js获取button的值并实时显示在input上
weixin_52563089的博客
10-20 970
html代码 方式一 <button bindtap="numBtn" class="bt" data-text="1">1</button> 方式二 <view hover-class="bg" bindtap="numBtn" data-val="1">1</view> JS代码 方式一 var num = e.target.dataset.text 方式二 var num = e.target.dataset.val
微信小程序按钮Button使用详解
热门推荐
代码小疯子
12-03 2万+
微信小程序 按钮 button
各种button按钮的区别
那么多的人，你要去哪里
02-11 3287
前言偶然发现bootstrap按钮控件有两个属性，&lt;input type="button" /&gt;和&lt;input type="submit" /&gt;，他们有什么区别呢本来标题是&lt;input type="button" /&gt;和&lt;input type="submit" /&gt;，可能因为有特殊字符，CSDN提示输入有误，提交不了，
几个漂亮的 button 样式
WaterShuiMiao的专栏
06-22 1206
<style>  02.btn   {  03  BORDER-RIGHT:   #7b9ebd   1px   solid;   PADDING-RIGHT:   2px;   BORDER-TOP:   #7b9ebd   1px   solid;   PADDING-LEFT:   2px;   FONT-SIZE:   12px;   FILTER:   progid:DXImageTransform.Microsoft.Gradient(GradientType=0,   StartColorSt
微信小程序demo：豆瓣电影：使用API(源代码+截图)
06-19
微信小程序demo：豆瓣电影：使用API(源代码+截图)微信小程序demo：豆瓣电影：使用API(源代码+截图)微信小程序demo：豆瓣电影：使用API(源代码+截图)微信小程序demo：豆瓣电影：使用API(源代码+截图)微信小程序demo：...
微信小程序demo：在线音乐：适用1028版本(源代码+截图)
06-19
微信小程序demo：在线音乐：适用1028版本(源代码+截图)微信小程序demo：在线音乐：适用1028版本(源代码+截图)微信小程序demo：在线音乐：适用1028版本(源代码+截图)微信小程序demo：在线音乐：适用1028版本(源代码+...
微信小程序button组件使用详解
01-03
本文为大家分享了微信小程序button组件的使用方法，供大家参考，具体内容如下 展示效果图 button组件的常用属性 size：default、mini—-default为块级按钮、mini为小按钮 type：primary、default、warn—-primary...
微信小程序 CSS 选择器::after和::before的简单使用
03-29
前两天看文档看到选择器那块儿的时候，前面4个基本都能理解：.class，#id，element，element, element，但后面两个::after和::before（文档中说，分别表示在view 组件的后面和前面插入内容），表示有点没有理解。...
微信小程序组件开发示例：上传图片组件
03-29
上传图片的功能，微信小程序已经提供了相应的组件和API，结合 weui 样式，如果不考虑复用的话，很容易实现（官方 demo 就可以拿来用 ^_^ ）。 如果要复用，可以利用模板，但是会面临微信小程序的很多限制。 限制  ...
小程序中的button按钮
Nara_deer的博客
04-25 2584
一.button的外观属性 1.size属性：设置button的大小，可选值有"default"（默认）、"mini"（小尺寸） <button size="default">默认按钮</button> <!-- 当button不设置size属性时取默认大小 --> <button size="mini">小尺寸按钮</button> 2.type属性：设置button的颜色，可选值有"default"（默认）、"primary"（绿色.
小程序的按钮按下去的样式（button-hover）为啥不起作用？
纠缠AI的亮子
07-10 1万+
微信小程序的button中，可以指定按下去的类名，例如： &lt;button hover-class="button-hover"&gt;同意&lt;/button&gt; 默认的类名就是 button-hover，因此上面的类名定义可以省略。 根据官方开发文档，在wxss中定义类名样式，就可以自定义按钮按下去的样式。但是我在开发中，发现直接这样写没有效果： .button-hover...
小程序按钮点击css效果（你很需要！)
流水日常，不做大论
11-08 1万+
小程序自带的button组件是有点急效果的，但是一旦自定义了class你发现 他就是一个方块，点了也是那样静静的呆在那里，没有视觉点击感……往往大多熟悉情况下，我们都要自己定义按钮样式 于是自己写了一套通用的小程序点击按钮效果 app.sxss .btn-hover{ position: relative; top: 3rpx; box-shadow:0px 0px 8px #999 ...
微信小程序之授权登录的实现（button按钮）
叶落无痕的博客
08-09 8948
前言：由于微信官方修改了 getUserInfo、authorize 接口，无法弹出授权窗口，所以现在无法实现一进入微信小程序就弹出授权窗口，只能通过 button 去触发 1.实现思路 微信授权登录仅适用于使用微信用户信息的用户，如果自己的项目有完善的用户信息（一套式开发项目），可不使用微信用户信息；如果仅为微信小程序，则要授权、获取用户信息 自己写一个微信授权登录页面让用户实现点击的功能，...
Android中Button文字不能铺满解决方法
xuelanghu1201的博客
06-23 2768
在开发过程中突然发现Android中的button设置文字后，字体设置大一些那么文字就会被无缘无故截掉了， 可是文字显示部分只占用了整个button的大概一半，跟本没有填充满，但这个时候需要做到填满， 否则调整字体变小的话效果很不好，或改变button外另加容器作为背景的话写法就太麻烦了， 后来经过不停实验得到了解决办法就是设置padding为0，这样文字就可以填充满了，不会浪费空间了
微信小程序客服消息按钮太小解决方法contact-button
qq_23064501的博客
07-27 1万+
微信小程序客服消息按钮太小解决方法contact-button
微信小程序自定义 button样式
qq_46346301的博客
05-30 1066
微信小程序自定义 button样式 wxml <view class="fixedBottom"> <button class="btn" style="width:100%; height: 100%;"formType="submit">保存</button> </view> wxss .fixedBottom{ position: fixed; bottom: 20rpx; left: 0rpx; width
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 191
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
React Suspense与Concurrent Mode：异步渲染的未来
最新发布
天涯学馆
05-20 638
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
uniapp无法运行到小程序，[微信小程序开发者工具] - initialize 18:21:40.076 [微信小程序开发者工具] 18:21:40.076 [微信小程序开发者工具] 18:21:40.708 [微信小程序开发者工具] × IDE may already started at port 48712, trying to connect 18:21:40.709 [微信小程序开发者工具] 18:21:40.712 [微信小程序开发者工具] 18:21:43.845 [微信小程序开发者工具] √ IDE server started successfully, listening on http://127.0.0.1:41989 18:21:43.846 [微信小程序开发者工具] - open IDE 18:21:43.849 [微信小程序开发者工具] 18:21:43.849 [微信小程序开发者工具] 18:21:44.918 [微信小程序开发者工具] √ open IDE 18:21:44.920 [微信小程序开发者工具]
06-10
这个错误提示是微信小程序开发者工具已经在使用中，导致uniapp无法将项目运行到小程序上。可以尝试以下解决方法： 1. 关闭微信小程序开发者工具，重新打开并运行uniapp项目。 2. 确认微信小程序开发者工具是否有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值