button邊框去除
相信大家開發(fā)微信小程序時(shí)使用button會(huì)遇到一些與預(yù)期效果不同的樣式問題粟誓。例如button的邊框無法去除，在為button設(shè)置圓角的時(shí)候周圍會(huì)有一些"雜質(zhì)"仑鸥，像這樣：
我們來看一下預(yù)期效果：
話不多說锈候，直接上關(guān)鍵代碼薄料，只需要css樣式更改：
/*button樣式這里可以根據(jù)需求自定義，此處貼出完整css泵琳。文章結(jié)尾拓展話題會(huì)使用，感興趣的同學(xué)可以閱讀 */
.button{? width: 90%;
? height: 80rpx;
? color: white;
? display: flex;
? align-items: center;
? justify-content: center;
? font-size: 30rpx;
? border-radius: 80rpx;
? background-color: #FED322;
}
/*關(guān)鍵代碼 .class::after{border:0} 或 .class::after{border:none} 去除邊框 */
.button::after{
? border: 0;
}
原因
? ? 熟悉css的同學(xué)都知道誊役，控件都具有默認(rèn)css樣式获列。當(dāng)為控件設(shè)置css樣式時(shí)，會(huì)覆蓋默認(rèn)樣式蛔垢。說到這里大家應(yīng)該都明白了击孩，微信小程序button控件的邊框默認(rèn)樣式是存在于 .class::after中的，因此只需要覆蓋.class::after中的默認(rèn)樣式即可去除邊框鹏漆。
button設(shè)置背景圖片
button設(shè)置背景圖代碼如下：
.button{
? background-image: url('http://********.******.cn/9.jpg');
? background-repeat: no-repeat;
? background-size: 100% 100%;
}
需要注意的是巩梢，url中不可以使用本地圖片
解決方案：
1.將需要作為背景的圖片上傳至服務(wù)器后獲取鏈接使用艺玲；
2.使用本地圖片括蝠，通過樣式設(shè)置將button放置于image標(biāo)簽之上；
拓展
- button字體居中問題
- button點(diǎn)擊效果問題
button字體居中問題
上面的代碼除了關(guān)鍵css樣式饭聚，還設(shè)置了
display: flex;
? align-items: center;
? justify-content: center;
tips：當(dāng)你需要更改button按鈕上文字大小時(shí)忌警，使用flex居中布局可以避免因?yàn)槲淖只虬粹o大小更改而導(dǎo)致的button文字不居中問題。
當(dāng)然該方式依舊存在限制秒梳，當(dāng)button控件寬高過小時(shí)法绵，文字會(huì)出現(xiàn)換行現(xiàn)象。此時(shí)應(yīng)避免使用尺寸過小的button酪碘，過小的button不利于用戶點(diǎn)擊朋譬，同時(shí)也是微信小程序并不提倡的樣式。
button點(diǎn)擊效果問題
button控件在用戶觸摸時(shí)會(huì)有反饋兴垦，這樣做的目的是使交互效果更加完善
官方文檔給出的注釋：
注1：button-hover 默認(rèn)為{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
需要注意的是徙赢，當(dāng)你為button設(shè)置了background-image或者background-color時(shí)庭呜，button的‘hover’交互效果是會(huì)消失的
此時(shí)可以使用.class:active簡(jiǎn)單的復(fù)原‘hover’交互效果
.buttonBgImg:active{
? background-color: rgba(0, 0, 0, 0.1);
? opacity: 0.7;
}
此時(shí)的效果與默認(rèn)‘hover’效果是存在區(qū)別的，如果你追求完美犀忱，可以使用js中提供的bindtouchstart和bindtouchend配合來完成這個(gè)效果募谎。同時(shí)，若你使用本地圖片作為背景圖時(shí)需要添加'hover'交互效果時(shí)阴汇，css無法滿足需求数冬，也可以使用js事件的方式完成該效果。
tips:后續(xù)會(huì)更新用于預(yù)覽文章內(nèi)效果的小程序碼
