|
作者：johnchai，來自原文地址
button按鈕組件說明:
button，顧名思義，按鈕，類似于html的button標(biāo)簽。我們可以設(shè)置按鈕的屬性，比如字體顏色大小，背景顏色等，可以給按鈕綁定事件，用戶點(diǎn)擊時(shí)會(huì)觸發(fā)事件。
button按鈕組件示例代碼運(yùn)行效果如下：
下面是WXML代碼：
-
<!--index.wxml-->
-
<view class="content">
-
<text class="con-text">怎么飛？點(diǎn)擊【按鈕】即飛</text>
-
<button class="con-button">Fly</button>
-
</view>
下面是JS代碼：
-
Page({
-
data:{
-
},
-
onLoad:function(options){
-
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
-
},
-
onReady:function(){
-
// 頁面渲染完成
-
},
-
onShow:function(){
-
// 頁面顯示
-
},
-
onHide:function(){
-
// 頁面隱藏
-
},
-
onUnload:function(){
-
// 頁面關(guān)閉
-
}
-
})
下面是WXSS代碼：
-
.content{
-
padding-top: 20px;
-
}
-
.con-text{
-
display: block;
-
padding-bottom: 10px;
-
}
-
.con-button{
-
margin-top: 10px;
-
color: black;
-
background-color: lightgreen
-
}
下面是WXML代碼：
-
<!--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
|
