【圖片按鈕】在微信小程序中實現圖片按鈕

目錄

一、示例代碼

二、核心點

---

一、示例代碼

今天正好遇到這個問題，順便就分享一下。

一開始是示例代碼，不重要，可以跳過直接看後面。

第一段代碼是前端代碼

<!--index.wxml-->

<button class="tapbtn1" plain="true" bindtap="skyOnclick">
    <image class="tapimg1" src='/images/icon1.png'></image>
</button>

第二段代碼是CSS樣式

/**index.wxss**/

.tapimg1{  
  width: 150rpx;
  height: 150rpx;
}

.tapbtn1[plain]{
  padding: 0;
  border:none;   
  width: 150rpx;
  height: 150rpx;
}

第一個tapimg1是圖片的類，第二個tapbtn1是按鈕的類。

上面的是我寫的參考代碼（隨便寫的，隨便命名的，別噴），下面是核心。

 

二、核心點

實現圖片按鈕的核心點如下：

1、隱藏按鈕的顯示

實現方法：在你需要設置的button的屬性中將其設爲=》 plain="true" ，即可實現。

2、隱藏按鈕的邊框

實現方法：在你需要設置的button的CSS樣式中將指定的屬性設爲=》 border:none，既可生效。

切記一定要在類名旁邊加上[plain]，例如：tapbtn1[plain]，不加上的話，邊框可能不會消失。

3、預防出現圖片和按鈕無法對齊的現象

實現方法：在你需要設置的button的CSS樣式中將指定的屬性設爲=》padding:0，即可生效。

 

 

寫的比較囉嗦，實際實現比較簡單。