uni-app 手机号码一键登录勾选框太小,不灵敏

uni-app 手机号码一键登录勾选框太小,不灵敏

uniapp 手机号码一键登录勾选框太小,不灵敏,怎么能设置大一点,官方文档没有找到设置的地方。

Image


更多关于uni-app 手机号码一键登录勾选框太小,不灵敏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

20 回复

问题已 确认 稍后版本修复

更多关于uni-app 手机号码一键登录勾选框太小,不灵敏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


还有问题 就是这个勾选框明显不对齐,严重影响UI美观。能不能做成对齐 或者可以设置隐藏掉这个勾选呢

回复 全栈工程师: 不对齐, 来张截图看看

回复 DCloud_Android_DQQ: 回复在下方了

回复 DCloud_Android_DQQ: 怎么修改选中的颜色 文档里没有

回复 3***@qq.com: 目前还不支持,稍后我们会考虑增加

你看前面那个勾选框 与 后面的文字 明显是没有对齐的

此bug已处理,稍后版本hx体现

回复 DCloud_Android_DQQ: 好的

回复 DCloud_Android_DQQ: hx版本3.1.22,依旧存在上述问题(复选框太小,点击不灵敏,与文字没有对齐,确认修复了吗?还是新增什么属性可以调整?

回复 jjhjiyu: 今天发alpha版本。

回复 jjhjiyu: “checkBoxSize”:“10px” 稍后你试试

回复 DCloud_Android_DQQ: 好的,谢谢

回复 DCloud_Android_DQQ:版本3.2.0 -alpha “checkBoxSize”:"10px"属性无效

回复 6***@qq.com: 你加错地方了吧。 贴一下完整的配置看看。

回复 DCloud_Android_DQQ: univerifyStyle: { “fullScreen”: true, // “privacyTerms”: { // “url”: “https://”, // 点击跳转的协议详情页面 // “title”: “用户服务协议” // 协议名称 // } “privacyTerms”: { “checkBoxSize”: “30px”, “defaultCheckBoxState”:“false”, // 条款勾选框初始状态 默认值: true “textColor”: “#BBBBBB”, // 文字颜色 默认值:#BBBBBB “termsColor”: “#5496E3”, // 协议文字颜色 默认值: #5496E3 “prefix”: “我已阅读并同意”, // 条款前的文案 默认值:“我已阅读并同意” “suffix”: “并使用本机号码登录”, // 条款后的文案 默认值:“并使用本机号码登录” “privacyItems”: [ // 自定义协议条款,最大支持2个,需要同时设置url和title. 否则不生效 { “title”: “隐私政策” // 协议名称 } ] } },

回复 DCloud_Android_DQQ: 抱歉,使用真机调试Android有效,IOS无效,IOS机型为iphone7、iphoneX

回复 6***@qq.com: 目前这个属性只支持android。 Ios有这个问题吗

回复 DCloud_Android_DQQ: 感谢回复,已获得IOS负责人的回复,IOS不支持设置勾选框大小,谢谢

针对uni-app中手机号码一键登录勾选框过小且不灵敏的问题,可以通过以下方式调整:

  1. 自定义样式覆盖
    使用CSS调整勾选框尺寸,例如:

    /* 适用于H5端 */
    .uni-agreements-box .uni-agreements-checkbox {
        width: 24px;
        height: 24px;
    }
    
  2. 扩大点击区域
    通过伪元素或外层容器增加可点击范围:

    .uni-agreements-box {
        position: relative;
        padding: 15px; /* 扩大热区 */
    }
    
  3. 替换原生组件
    若官方组件限制较多,可改用<label>+<input type="checkbox">自定义实现:

    <label class="custom-checkbox">
      <input type="checkbox">
      <text>同意协议</text>
    </label>
    
    .custom-checkbox input {
        width: 26px;
        height: 26px;
    }
    
  4. 调整协议文字样式
    同步修改文字大小避免比例失调:

    .uni-agreements-text {
        font-size: 16px;
        line-height: 24px;
    }
回到顶部