zoukankan      html  css  js  c++  java
  • 微信小程序 修改按钮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;
    }
  • 相关阅读:
    在windows上使用win2000资源工具
    Apache与Tomcat整合
    web服务器和应用服务器概念比较
    linux定时删除N天前的文件(文件夹)
    程序员如何自我学习和成长?
    20210708总结
    Docker 常用命令!还有谁不会?
    Redis常用命令set
    laravel与thinkphp之间的区别与优缺点
    2021年7月总结
  • 原文地址:https://www.cnblogs.com/china-fanny/p/10405462.html
Copyright © 2011-2022 走看看