uni-app 一键登录按钮默认圆角不统一问题 一键登录按钮和其他登录方式按钮默认圆角不一致:一个是圆角,一个是直角

uni-app 一键登录按钮默认圆角不统一问题 一键登录按钮和其他登录方式按钮默认圆角不一致:一个是圆角,一个是直角

示例代码:

"authButton": {
    "normalColor": "#f79f23", // 授权按钮正常状态背景颜色 默认值:#3479f5
    "highlightColor": "#f79f23",  // 授权按钮按下状态背景颜色 默认值:#2861c5(仅ios支持)
    "disabledColor": "#999999",  // 授权按钮不可点击时背景颜色 默认值:#73aaf5(仅ios支持)
    "textColor": "#ffffff",  // 授权按钮文字颜色 默认值:#ffffff
    "title": "本机号码一键登录", // 授权按钮文案 默认值:“本机号码一键登录”
    "border-radius": "50px"
},
"otherLoginButton": {
    "visible": "true", // 是否显示其他登录按钮,默认值:true
    "normalColor": "#f79f23", // 其他登录按钮正常状态背景颜色 默认值:#f8f8f8
    "highlightColor": "#f79f23", // 其他登录按钮按下状态背景颜色 默认值:#dedede
    "textColor": "#ffffff", // 其他登录按钮文字颜色 默认值:#000000
    "title": "短信验证码登录", // 其他登录方式按钮文字 默认值:“其他登录方式”
    "borderWidth": "1px",  // 边框宽度 默认值:1px(仅ios支持)
    "borderColor": "#f79f23"  ,//边框颜色 默认值: #c5c5c5(仅ios支持)
    "border-radius": '50px'
}

操作步骤:

真机iphoneXS max,HB3.1.9版本

预期结果:

一键登录和其他按钮登录 圆角不一样,如图

实际结果:

一键登录和其他按钮登录 圆角应该一样或者可以自定义设置,官网文档没有这方面的配置

bug描述:

HB 3.1.9版本,iphone 真机测试,一键登录按钮和其他登录方式按钮,默认圆角方式不统一:一个是圆角,一个是直角  

Image


更多关于uni-app 一键登录按钮默认圆角不统一问题 一键登录按钮和其他登录方式按钮默认圆角不一致:一个是圆角,一个是直角的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你好感谢反馈, 其他登录按钮默认样式是背景透明无边框无圆角,如需和登录按钮设置一样的圆角需要自行设置 “borderRadius”: “24px”,下个版本会将缺省值和登录按钮设置为一样的值

更多关于uni-app 一键登录按钮默认圆角不统一问题 一键登录按钮和其他登录方式按钮默认圆角不一致:一个是圆角,一个是直角的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app一键登录组件样式问题。从你的配置代码看,虽然两个按钮都设置了"border-radius": "50px",但实际渲染时确实存在圆角不统一的情况。

这个问题主要是由于一键登录组件在不同平台下的原生实现差异导致的。iOS端的一键登录按钮是由运营商SDK渲染的,其样式定制能力相对有限,即使设置了border-radius也可能无法完全生效。

目前可行的解决方案:

  1. 统一使用直角样式:将两个按钮的border-radius都设置为0,保持样式一致性
"authButton": {
    "border-radius": "0"
},
"otherLoginButton": {
    "border-radius": "0"
}
回到顶部