美文网首页
微信小程序 button按钮过大问题

微信小程序 button按钮过大问题

作者: 理子 | 来源:发表于2020-05-13 10:03 被阅读0次

    来源:
    1.https://developers.weixin.qq.com/community/develop/doc/000e2abbd40b70cbfb097782f5b800

    1. https://developers.weixin.qq.com/community/develop/doc/000c4a39ef801063fa09ca7cd51800
    2. https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style

    style

    基础库 2.8.0 开始支持,低版本需做兼容处理

    微信客户端 7.0 开始,UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 "style": "v2"可表明启用新版的组件样式。

    本次改动涉及的组件有 button icon radio checkbox switch slider。可前往小程序示例进行体验。

    原因:

    煞笔微信团队的锅
    button: not([size='mini']) 默认给button设置了属性

    解决:

    1. 如果全局都用自定义button,配置里去掉 "style": "v2" 即可

    2. 邠心
      不懂为什么要把按钮加上min-height,把所有按钮的height属性都给覆盖掉了,导致按钮异常的大,界面异常的难看,还没法去掉min-height,优先级竟然也比app.wxss设置的高

    只能通过以下代码来屏蔽了( 可惜这样margin也被覆盖了,还是转回v1吧

    app.wxss
    button::after {
      border: none;
      display: none;
    }
     
    button:not([size='mini']) {
      min-height: inherit !important;
      width: auto !important;
      font-weight: normal;
    }
    

    相关文章

      网友评论

          本文标题:微信小程序 button按钮过大问题

          本文链接:https://www.haomeiwen.com/subject/kkmgnhtx.html