微信小程序 button的樣式設(shè)置為某張圖片

請首先記住,button可以使用任何想要使用的樣式,沒有限制,前端都可以做。

step1 wxml

<button open-type='share' class="share" style="background-image:url(../../imgs/icon_2_forward@2x.png);" plain='true'></button>
button 因為自帶的各種各樣的作用,所以open-type選一個就可以了。

注意:
  1. plain='true'與只是將plain放在那里的效果是一樣的,這是一類,默認(rèn)只要放上去就會相當(dāng)于有了一個默認(rèn)的值。
  2. 其實此處的plain完全沒有起作用,起作用的是樣式里的opacity:0的設(shè)置

bug1 :
小程序如果使用直接給button設(shè)置背景圖片的方式,那么,安卓不顯示。
解決方式:將button設(shè)為opacity:0 然后定位放在那副圖片的上邊。

opacity:0VSvisibility: hidden;VSdisplay:none

opacity是用來設(shè)置元素的不透明級別的。
visibility是雖然不可見,但是占據(jù)著那個位置,元素也不在,用來作為一些表單提醒的位置占位符最好了,比如這種

image.png

style='visibility: {{numEnough?"hidden":"visible"}};'此時應(yīng)用是最好的。但是元素hidden的時候是不存在的,只保留了位置。
display是既不保存位置,也看不到,元素也不存在于那個位置上。

背景圖片使用方式:
  1. 背景圖片是不支持在css中被引用資源的
  2. 會降低頁面的渲染速度,內(nèi)聯(lián)樣式
  3. 一個可以轉(zhuǎn)換成base64的條件:如果圖片足夠小且因為用處的特殊性無法被制作成雪碧圖(CssSprites),在整個網(wǎng)站的復(fù)用性很高且基本不會被更新。
    from:https://www.cnblogs.com/coco1s/p/4375774.html

<button open-type='share' class="share" ></button>
分析:若是將背景圖片放在css中,也會比較慢。
暫時做法:體感,寫在內(nèi)聯(lián)樣式中稍微快一點點

step 2 wxss

.goBack .share{
  width: 38rpx;
  height: 36rpx;
  padding:0 20rpx;
  position: absolute;
  right: 32rpx;
  top: 0;
  bottom: 0;
  margin: auto;
  background-size: 38rpx 36rpx;
  background-repeat:no-repeat;
  border:none;
}

background-sizebackground-repeatborder:none;是button必須的

至此,完成。

分享按鈕效果
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容