小程序修改按钮button样式：去边框、圆角及文字居左对齐、修改按钮高度

因为有要button和view显示的样式相同的需要

所以要去掉按钮的边框，圆角，背景色，文字需要居左对齐，代码如下：

关键是按钮的样式：

1. 去掉边框：

.user-phone-btn::after {

  border: none;

}

2. 去掉圆角（注意border-radius: 0以下两处都要写）：

.user-phone-btn {

  border-radius:;

}

.user-phone-btn::after {

  border-radius:;

}

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:;

  color:white;

  margin-left: 0rpx;

  padding-left: 0rpx;

  height: 60rpx;

  line-height: 60rpx;

}

.user-phone-btn::after {

  border: none;

  border-radius:;

}

巴特西

小程序修改按钮button样式：去边框、圆角及文字居左对齐、修改按钮高度

最新文章

热门文章

巴特西

小程序 修改按钮button样式：去边框、圆角及文字居左对齐、修改按钮高度

最新文章

热门文章

小程序修改按钮button样式：去边框、圆角及文字居左对齐、修改按钮高度