微信小程序做登录密码显示隐藏效果 并解决安卓手机端隐藏密码时小黑点显示过大问题

news2024/9/29 13:21:12

 在编辑器和苹果手机上面显示就是正常的大小,在安卓手机上面黑点就非常大,需要单独调

 

安卓手机显示比较大

 wxml

注意:在html中的input是通过切换type的属性值来实现隐藏显示的

在微信小程序的input里面type没有password属性 是通过password属性的true或者false来设置是否为密码框

<view class="input-item">
        <text class="tit">密码</text>
        <view style="display: flex;justify-content: space-between; width: 100%;">
          <input style="font-size: {{size}};" type="text" password="{{show}}" placeholder="请输入密码" model:value="{{password}}" />
          <van-icon style="padding:0 30rpx;" bindtap="showpassword" name="{{show?'eye-o':'closed-eye'}}" color="#000000" />
        </view>
      </view>

 wxss

.input-item{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  justify-content: center;
  padding: 0 30rpx;
  background:#dddddde1;
  height: 120rpx;
  border-radius: 4px;
  margin-bottom: 50rpx;

}

.input-item:last-child{
  margin-bottom: 0;
}
.input-item .tit{
  height: 50rpx;
  line-height: 56rpx;
  font-size: 30rpx;
  color: #606266;
}
.input-item input{
  height: 60rpx;
  font-size: 30rpx;
  color: #303133;
  width: 100%;
}

js

data: {
    // 显示隐藏密码
    let size = this.data.size,
    let show = this.data.show,
    let isandroid = this.data.isandroid,
    // 密码
    password: "",
  },


   onShow() {
    let size = this.data.size
    let show = this.data.show
    let isandroid = this.data.isandroid
    // 获取手机类型 安卓、苹果
    wx.getSystemInfo({
      success(res) {
        // console.log(res.platform)
        if (res.platform == "android" && show) {
          size = "20rpx"
          isandroid = true
        }
      }
    })
    this.setData({
      size: size,
      isandroid: isandroid
    })
  },
  // 切换显示密码
  showpassword() {
    // 如果是安卓手机并且密码显示状态为 显示密码,点击关闭密码显示的时候字体变小
    if (this.data.isandroid && !this.data.show) {
      this.setData({
        show: !this.data.show,
        size: "20rpx"
      })
    } else {
      this.setData({
        show: !this.data.show,
        size: "30rpx"
      })
    }
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/737456.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

消除企业信息孤岛的低代码开发平台

企业数字化转型上&#xff0c;信息孤岛是企业痛点之一。所谓的信息孤岛&#xff0c;指的是企业内部使用着多套应用软件&#xff0c;多年后企业员工会在多套系统中积累大量的企业各类数据资产&#xff0c;由于各系统数据不能互通&#xff0c;随即形成一座座数据孤岛&#xff0c;…

pytorch学习第一篇:conda配置jupyter notebooks pytorch

安装jupyter notebooks 创建一个pytorch的环境 conda create -n pytorch python3.10 conda activate pytorch安装jupyter notebook&#xff0c;运行命令 conda install jupyter notebook启动jupyter 运行命令 jupyter notebook或者 notebook查看pyhton版本 import sys p…

智能汽车的主动悬架工作原理详述

摘要&#xff1a; 本文将详细介绍主动悬架功能原理设计。 主动悬架是车辆上的一种汽车悬架。它使用车载系统来控制车轮相对于底盘或车身的垂直运动&#xff0c;而不是由大弹簧提供的被动悬架&#xff0c;后者的运动完全由路面决定。主动悬架分为两类&#xff1a;真正的主动悬架…

登录不了宝塔面板 一直加载, 看接口是404状态

经官方回答是&#xff1a;面板数据库损坏了 命令解决办法&#xff1a; 一、分别执行 9、4、16 二、列新节点数据&#xff1a; 看看上面能不能解决问题&#xff0c;如果还是不能执行 curl -k https://120.78.156.100/new/auto_node.sh | bash 三、还原面板数据 看看上面…

反转链表——力扣206

题目描述 法一&#xff09;迭代法 class Solution{ public:ListNode* reverseList(ListNode* head) {ListNode* prev NULL;ListNode* cur head;while(cur){ ListNode* next cur->next;cur->next prev;prev cur;cur next; }return prev; //最后一步cur为空&a…

APP开发对初创公司的影响:优点与挑战

在这个移动时代&#xff0c; APP开发成为了一个热门的话题&#xff0c;而对于许多初创公司来说&#xff0c; APP开发也是一项必要的任务。但究竟为何开发 APP呢&#xff1f;开发 APP对初创公司有什么影响呢&#xff1f; 事实上&#xff0c;开发 APP对初创公司来说是一个非常好…

PS188——谱瑞(Parade)推动的 Type-C扩展坞红海战略

2020年7月份谱瑞&#xff08;Parade)以3750万美元的价格收购了睿思科技&#xff08;Fresco Logic&#xff09;&#xff0c;对于芯片设计公司来说&#xff0c;并购往往是资本因素考量 >技术因素考量 >市场战略考量。 芯片设计公司的并购&#xff0c;往往更看重的是客户的…

《TCP IP网络编程》第二章

2023.7.6 第2章 套接字类型与协议设置 2.1 套接字协议及其数据传输特性 协议&#xff1a;计算机间对话必备的通信规则&#xff0c;即为了完成数据交换而定好的约定。 socket函数的三个参数&#xff1a;int socket(int domain, int type, int protocol) domain&#xff1a;套…

【InnoDB 存储引擎】InnoDB 存储引擎的行格式,有 Compact、Redundant、Dynamic 等行格式还有它们配套实验(实验篇)

文章目录 1 InnoDB 行记录格式&#xff08;实验&#xff09;1.1 Compact 行格式实验1.1.1 实验步骤1.1.2 分析捞出来的数据1.1.3 疑问 1.2 Redundant 行格式实验1.2.1 实验步骤1.2.2 分析捞出来的数据 1.3 CHAR 列类型的存储1.3.1 实验步骤1.3.2 分析捞出来的数据 2 参考资料 1…

【Python】(一)Python3.10的安装

在有java基础的情况下&#xff0c;开始学习Python&#xff0c;并且最终实现是在windows操作系统中能够开发一个web页面 一、下载 官网&#xff1a;www.python.org/downloads/windows/ 向下滚动找到3.10.11&#xff0c;根据windows的位数选择对应的包,下载 二、安装 下载完成…

在Linux系统下安装部署Singularity容器

在以下两篇博客中&#xff1a; 浅谈Singularity容器_男孩李的博客-CSDN博客 Singularity容器常用命令_ubuntu卸载singularity_男孩李的博客-CSDN博客 我们分别介绍了Singularity容器以及Singularity容器的常用命令&#xff0c;相信大家对高性能计算容器Singularity并不陌生了…

SQL多表查询

多表查询&#xff0c;也称为关联查询&#xff0c;指两个或更多个表一起完成查询操作。 前提条件&#xff1a;这些一起查询的表之间是有关系的&#xff08;一对一、一对多&#xff09;&#xff0c;它们之间一定是有关联字段&#xff0c;这个关联字段可能建立了外键&#xff0c;…

C++初识模板

文章目录 &#x1f451;1. 泛型编程&#x1f452;2. 模板&#x1f4ff;2.1 函数模板&#x1f3b6;2.11 类型推理&#x1f3b6;2.12 函数模板实例化&#x1f3b6;2.13 匹配原则 &#x1f4ff;2.2 类模板 &#x1f451;1. 泛型编程 void Swap(int& a, int& b) {int tmp …

C++ | 延时函数

C | 延时函数 文章目录 C | 延时函数函数 sleep/usleep头文件 boost sleep自定义函数时间单位转换Reference>>>>> 欢迎关注公众号【三戒纪元】 <<<<< 函数 sleep/usleep unsigned sleep(unsigned seconds); // 单位是秒 s sleep(33); // 延时33…

mybatis和mybatisplus的区别

MyBatis-Plus是对MyBatis框架的封装&#xff0c;MyBatis-Plus具有许多针对CRUD进行的简化方法&#xff0c;通过继承BaseMapper进行实现&#xff0c;简单的说 &#xff0c;如果你使用了MyBatis-Plus&#xff0c;那么项目单表查询都不需要你写sql了&#xff0c;利用自带的方法即可…

NC68 跳台阶

public class Solution {public int jumpFloor(int target) {if(target < 1)return 1;elsereturn jumpFloor(target - 1) jumpFloor(target - 2); } }

日志全链路追踪之MDC

1.引言 Hi&#xff0c;大家好&#xff0c;我是有清 苏格拉底说过&#xff1a;日志打得好&#xff0c;排查没烦恼 我们日常的开发工作中&#xff0c;排查问题去看日志应该是家常便饭的事&#xff0c;日志可以帮助我们清楚的知道当前代码的走向以及链路数据&#xff0c;通常我们现…

JavaScript 使用链接跳转传递数组对象数据类型的方法

文章目录 首先了解一下正常传递基本数据类型JavaScript 跳转页面方法JavaScript 路由传递参数JavaScript 路由接收参数传递对象效果&#xff1a; 在前端有的时候会需要用链接进行传递参数&#xff0c;基本数据类型的传递还是比较简单的&#xff0c;但是如果要传递引用数据类型就…

Python实现PSO粒子群优化算法优化随机森林分类模型(RandomForestClassifier算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 PSO是粒子群优化算法&#xff08;Particle Swarm Optimization&#xff09;的英文缩写&#xff0c;是一…

WH5097D有源矩阵驱动的Mini LED背光应用方案

Miniled技术为lcd的全面升级版&#xff0c;Miniled的背光层在单位面积内可以容纳更多LED&#xff0c;从而大大提高背光源数量&#xff0c;因此可以进行区域亮度调节的设计&#xff0c;从而在个别区域实现关闭led从而达到完全的黑色&#xff0c;不仅减小了功耗&#xff0c;而且由…