微信小程序 修改按钮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;
}