button.png
上圖下字.png
需要使用微信小程序button組件的open-type來(lái)實(shí)現(xiàn)授權(quán)之類的操作時(shí)霞掺，發(fā)現(xiàn)樣式并不是自己想要的株婴，然后改起來(lái)也并不是很方便全封，下面讓我們一起看一下：
默認(rèn)狀態(tài)
<button>確定</button>
此時(shí)返奉，各項(xiàng)值均為默認(rèn)值钝荡，效果如下：有邊框以及圓角
默認(rèn)狀態(tài).png
設(shè)置其css如下：背景顏色background-color文字顏色color,設(shè)置type為primary是背景色為微信綠，無(wú)法設(shè)置背景顏色
.btn1 {
width: 80%;
margin-top: 20rpx;
background-color: beige;
color: white;
}
設(shè)置背景顏色和文字顏色.png
修改圓角：
.btn1 {
width: 80%;
margin-top: 20rpx;
background-color: beige;
color: white;
border-radius: 98rpx;
}
屏幕快照 2018-07-03 18.52.02.png
效果并不好，此時(shí)增加
.btn1::after {
border-radius: 98rpx;
}
效果圖如下：
完美圓角效果.png
如果需要取消邊框浸遗，在::after中增加border: 0;
無(wú)邊框button.png
這樣子的button是達(dá)不到UI的要求的，我們還需要添加圖片箱亿。跛锌。。不讓自定義届惋。髓帽。。沒(méi)啥前端基礎(chǔ)脑豹，開(kāi)始直接在button里面加了張圖片郑藏，可是就是對(duì)不齊，后來(lái)問(wèn)了下別人瘩欺，然后下面是答案（其實(shí)這個(gè)我也會(huì)啊译秦，突然就是想不到。击碗。筑悴。）：
<button class='btn1' open-type='openSetting'>
<image class='btnImg' src='../../images/wechat.png'></image>
<view>確定</view>
</button>
.btn1 {
width: 80%;
margin-top: 20rpx;
background-color: burlywood;
color: white;
border-radius: 98rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.btnImg {
margin-right: 8rpx;
width: 46rpx;
height: 46rpx;
}
.btn1::after {
border-radius: 98rpx;
border: 0;
}
效果圖如下：
帶圖片icon的Button.png
還有上圖下字效果：
<button class='btn1' open-type='contact'>
<image class='btnImg' src='../../images/客服.png'></image>
<view>聯(lián)系客服</view>
</button>
<button class='btn2' open-type='openSetting'>
<image class='btnImg' src='../../images/設(shè)置.png'></image>
<view>授權(quán)設(shè)置</view>
</button>
.btn1{
width: 200rpx;
height: 200rpx;
margin-top: 20rpx;
background-color: white;
color: #999999;
border-radius: 0rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 30rpx;
}
.btnImg {
width: 50rpx;
height: 50rpx;
}
.btn1::after {
border: 0;
}
.btn2 {
width: 200rpx;
height: 200rpx;
margin-top: 20rpx;
background-color: white;
color: #999999;
border-radius: 0rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 30rpx;
}
.btn2::after {
border: 0;
}
效果圖如下：
上圖下字.png
點(diǎn)擊高亮狀態(tài)
//設(shè)置none則無(wú)高亮狀態(tài)
hover-class="none"
//可以綁定一個(gè)class，到css中設(shè)置高亮樣式
禁止點(diǎn)擊狀態(tài)
disable="true"
此時(shí)按鈕狀態(tài)由系統(tǒng)決定稍途，無(wú)法改變阁吝，但是有時(shí)我們又需要自定義，所以
<button class='{{canSubmit ? "submit": "submitDis"}}' hover-class="none">確定</button>
根據(jù)是否可點(diǎn)擊狀態(tài)分別綁定不同的class械拍，最后在點(diǎn)擊事件回調(diào)中中判斷突勇，如果是禁止點(diǎn)擊的則直接return
同時(shí)，hover-class也可以綁定為一個(gè)樣式和一個(gè)"none",在可點(diǎn)擊時(shí)坷虑，有點(diǎn)擊效果甲馋，這樣比較好的模擬了disable狀態(tài)，又自定義了效果迄损。
賞我一個(gè)贊吧~~~
