亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2020年06月19日 14:50:00   作者：亮子介  
這篇文章主要介紹了微信小程序 button 的樣式設(shè)置為圖片的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

下面通過(guò)多種方法給大家介紹微信小程序 button 的樣式設(shè)置為圖片，具體內(nèi)容如下所示：

方法一：button 與 image 重疊

將button設(shè)為 opacity:0 然后定位放在那副圖片的上邊。

方法二：background-image

background-image。背景圖片是不支持在css中被引用資源的，但可以使用網(wǎng)絡(luò)資源。

<button open-type='share' class="share" style="background-image:url(https://example.com/imgs/icon_2_forward@2x.png);" plain='true'>
</button>

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-size與background-repeat與border:none;是button必須的

方法三：base64

什么情況下使用base64格式？條件：如果圖片足夠小且因?yàn)橛锰幍奶厥庑詿o(wú)法被制作成雪碧圖（CssSprites），在整個(gè)網(wǎng)站的復(fù)用性很高且基本不會(huì)被更新。

方法四：button 嵌套 image

實(shí)例：

 <button class="btn">
<image src="/images/img.png">
</image>
</button>

PS：下面看下微信小程序把客服按鈕替換成自己想要的圖片

正文：

今天開(kāi)發(fā)微信客服的功能，發(fā)現(xiàn)微信提供的</contact-button> 的默認(rèn)圖片樣式是真的丑，所以想替換成自己想要的圖片樣式，并且點(diǎn)擊圖片能夠有同樣的效果。下面看一下對(duì)比，微信小程序開(kāi)發(fā)交流QQ群招人啦,群號(hào)(173683895)歡迎加入

  做成這樣之后是不是感覺(jué)舒服多了？ 廢話(huà)不多說(shuō)，直接上代碼：

實(shí)現(xiàn)原理：把原生的contact-button組件設(shè)置透明并用絕對(duì)定位放在左邊保證不占位置，再展示理想的圖片放在contact-button的位置

//index.wxml   

<view class="df_1 l_h15">
 <contact-button size="22" class='pos'></contact-button>
  <image class="icon_kf" src="/images/kefu.png"></image> 
 <view class="dbtext">客服</view>
 </view>

//index.wxss  

.pos{
 position: absolute;
 top: 10px;
 left: 23px;
 opacity: 0;
}
.icon_kf{
 width: 20px;
 height: 20px;
 display: inline-block;
 margin-top: 5px;
}
.dbtext{
 line-height: 15px;
 color: #666;
 font-size: 12px;
}
//下面是最外層的view的樣式，可以要也可以不要
.df_1{
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-tap-highlight-color: transparent;
}
.l_h15{
 line-height: 15px;
 text-align: center;
}

總結(jié)

到此這篇關(guān)于微信小程序 button 的樣式設(shè)置為圖片的文章就介紹到這了,更多相關(guān)小程序 button 樣式設(shè)置為圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論