button邊框去除

相信大家開發(fā)微信小程序時使用button會遇到一些與預(yù)期效果不同的樣式問題。例如button的邊框無法去除，在為button設(shè)置圓角的時候周圍會有一些"雜質(zhì)"，像這樣：

邊框的存在，使得顯示效果并不理想

我們來看一下預(yù)期效果：

預(yù)期的效果，對比之下效果非常明顯

話不多說，直接上關(guān)鍵代碼，只需要css樣式更改：

/*button樣式這里可以根據(jù)需求自定義，此處貼出完整css。文章結(jié)尾拓展話題會使用，感興趣的同學(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樣式時，會覆蓋默認(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中不可以使用本地圖片

使用本地圖片資源，出現(xiàn)渲染層網(wǎng)絡(luò)錯誤

解決方案：

1.將需要作為背景的圖片上傳至服務(wù)器后獲取鏈接使用；

2.使用本地圖片，通過樣式設(shè)置將button放置于image標(biāo)簽之上；

拓展

- button字體居中問題

- button點擊效果問題

button字體居中問題

上面的代碼除了關(guān)鍵css樣式，還設(shè)置了

display: flex;

? align-items: center;

? justify-content: center;

tips：當(dāng)你需要更改button按鈕上文字大小時，使用flex居中布局可以避免因為文字或按鈕大小更改而導(dǎo)致的button文字不居中問題。

當(dāng)然該方式依舊存在限制，當(dāng)button控件寬高過小時，文字會出現(xiàn)換行現(xiàn)象。此時應(yīng)避免使用尺寸過小的button，過小的button不利于用戶點擊，同時也是微信小程序并不提倡的樣式。

button點擊效果問題

button控件在用戶觸摸時會有反饋，這樣做的目的是使交互效果更加完善

官方文檔給出的注釋：

注1：button-hover 默認(rèn)為{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

需要注意的是，當(dāng)你為button設(shè)置了background-image或者background-color時，button的‘hover’交互效果是會消失的

此時可以使用.class:active簡單的復(fù)原‘hover’交互效果

.buttonBgImg:active{

? background-color: rgba(0, 0, 0, 0.1);

? opacity: 0.7;

}

此時的效果與默認(rèn)‘hover’效果是存在區(qū)別的，如果你追求完美，可以使用js中提供的bindtouchstart和bindtouchend配合來完成這個效果。同時，若你使用本地圖片作為背景圖時需要添加'hover'交互效果時，css無法滿足需求，也可以使用js事件的方式完成該效果。

tips:后續(xù)會更新用于預(yù)覽文章內(nèi)效果的小程序碼