碼上快樂

相關內容    簡體    繁體

微信小程序組件解讀和分析：七、button按鈕

本文轉載自   查看原文   2017-03-28 22:47   11060    組件示例/ 微信小程序/ 入門教程/ 51小程序

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

點擊查看原文


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 微信小程序 button 按鈕 微信小程序組件解讀和分析：四、icon圖標 微信小程序組件解讀和分析：十一、label標簽 微信小程序組件解讀和分析：八、checkbox復選項 微信小程序button組件樣式 微信小程序----button組件 微信小程序button組件樣式 微信小程序組件button 微信小程序 button 組件 微信小程序-button組件
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM