小程序修改按钮button样式，取边框、圆角及文字居左对齐

时间：2019-02-20 12:01:57 收藏：0 阅读：1558

因为有要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;
}

具体代码如下：

// .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;
}
.user-phone-btn::after {
  border: none;
  border-radius: 0;
}

原文：https://www.cnblogs.com/china-fanny/p/10405462.html

小程序 修改按钮button样式，取边框、圆角及文字居左对齐

小程序修改按钮button样式，取边框、圆角及文字居左对齐