您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“微信小程序button組件如何自定義樣式”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“微信小程序button組件如何自定義樣式”吧!
背景顏色
wxml代碼
<button class='btn' bindtap='sumbit' >確定</button>
wxss代碼
.btn {
width: 90%;
margin-top: 30rpx;
background-color: #FFCC00;
color: #FFF;
}
background-color屬性是修改背景顏色的,color是修改字體顏色的,這里注意:如果組件里面寫(xiě) type='....',修改背景顏色會(huì)無(wú)效,例如以下代碼:
<!--修改背景顏色無(wú)效-->
<button class='btn' bindtap='sumbit' type='primary'>確定</button>
按鈕去邊框
小程序里提供的button組件默認(rèn)帶有邊框,去掉按鈕邊框只需要在wxss樣式代碼中添加:
.btn::after {
border: 0;
}
按鈕點(diǎn)擊時(shí)的背景顏色
wxml代碼
<button class='btn' bindtap='sumbit' hover-class='btn_hover'>確定</button>
wxss代碼
.btn_hover {
background-color: pink;
}
這里,hover-class是重點(diǎn),小程序文檔中這樣解釋這個(gè)屬性:
類(lèi)型:String
默認(rèn)值:button-hover
說(shuō)明:指定按鈕按下去的樣式類(lèi)。當(dāng)hover-class='none'時(shí),沒(méi)有點(diǎn)擊效果。
到此,相信大家對(duì)“微信小程序button組件如何自定義樣式”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún),關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。