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

 

版权声明:本文为china-fanny原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/china-fanny/p/10405462.html1