微信小程序 修改按鈕button樣式：去邊框、圓角及文字居左對齊、修改按鈕高度

因為有要button和view顯示的樣式相同的需要

所以要去掉按鈕的邊框，圓角，背景色，文字需要居左對齊，代碼如下：

關鍵是按鈕的樣式：

1. 去掉邊框：

.user-phone-btn::after {
  border: none;
}

2. 去掉圓角（注意border-radius: 0以下兩處都要寫）：

.user-phone-btn {
  border-radius: 0;

}
.user-phone-btn::after {
  border-radius: 0;
}

3. 去掉背景：設置背景顏色和父view背景顏色相同即可

4. 文字左對齊（要設置margin-lef和padding-left）：

.user-phone-btn {
  margin-left: 0rpx;
  padding-left: 0rpx;
}

 

5. 修改button高度：需要設置line-height屬性，值與height設置相同即可，不然按鈕中的文字顯示不會居中

具體代碼如下：

// .wxml
<view wx:if='{{hasBindingPhoneNumber}}' class='user-phone' >123456789012</view>
<button wx:else class='user-phone-btn'  open-type="getPhoneNumber" lang="zh_CN"  size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindgetphonenumber="bindGetPhoneNumber" hover-class="other-button-hover">buttonText</button>

 

// .js文件
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    defaultSize: 'default',
    disabled: false,
    plain: false,
    loading: false,
  },
})

 

.user-phone {
  color: white;
  font-size: 28rpx;
}

.user-phone-btn {
  background-color: #FF8EAC;
  font-size: 28rpx;
  border-radius: 0;
  color:white;
  margin-left: 0rpx;
  padding-left: 0rpx;
  height: 60rpx;
  line-height: 60rpx;
}
.user-phone-btn::after {
  border: none;
  border-radius: 0;
}