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

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

 

安卓手机显示比较大

 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" bindinput="input" 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.sizelet show = this.data.showlet 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.data.password) {// 安卓手机this.setData({show: !this.data.show,size: "20rpx"})} else {// 其他手机this.setData({show: !this.data.show,size: "30rpx"})}},// 密码输入中input() {// 在输入中如果是安卓手机并且有内容并且当前显示状态为隐藏就变成小字体 其他情况都为正常大字体if (this.data.isandroid && this.data.password && this.data.show) {this.setData({size: "20rpx"})} else {this.setData({size: "30rpx"})}},

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux开发工具之vim工具的使用介绍

目录 前言 1.vim的基本概念 命令模式(Normal mode) 插入模式(Insert mode) 末行模式(last line mode) 2.vim的基本操作 命令模式的命令集 移动光标 ​编辑 删除文字 复制 替换 撤销操作 更改 vim末行模式命令集 简单vim配置 总结 前言 大家好呀&#xff0c;许久…

数据结构 | 图的最短路径 Floyd算法

一、数据结构定义 typedef int VertexType; typedef int EdgeType;/*图*/ typedef struct {VertexType Vexs[SIZE]; //结点 EdgeType Edges[SIZE][SIZE]; //权值 int vexnum, arcnum; }MGraph;/*路径*/ typedef struct {int path[SIZE][SIZE];EdgeType length; }Path; 1.二维…

微服务 云原生:微服务相关技术简要概述

后端架构演进 单体架构 所谓单体架构&#xff0c;就是只有一台服务器&#xff0c;所有的系统、程序、服务、应用都安装在这一台服务器上。比如一个 bbs 系统&#xff0c;它用到的数据库&#xff0c;它需要存储的图片和文件等&#xff0c;统统都部署在同一台服务器上。 单体架…

白皮书案例解读|数字孪生与港口的结合会碰撞出什么样的火花呢?

以下案例来自于《数字孪生世界白皮书&#xff08;2023版&#xff09;》 领取方式&#xff1a;公众号「EasyV数字孪生」后台回复「白皮书」即可领取&#xff01; 嗨&#xff0c;我又出现啦&#xff5e;今天想和大家聊聊关于港口场景数字孪生技术的应用&#xff0c;欢迎大家踊跃…

基于JavaSwing+MySQL的仓库商品管理系统

点击以下链接获取源码&#xff1a; https://download.csdn.net/download/qq_64505944/88046204?spm1001.2014.3001.5503 JDK1.8 MySQL5.7 功能&#xff1a;管理员与员工两个角色登录&#xff0c;增删改查用户信息&#xff0c;修改密码&#xff0c;增删改查商品信息&#xff0c…

opencv基础:环境配置

最近人工智能很火&#xff0c;所以蹭个热度&#xff0c;聊一个跨平台计算机视觉库----Opencv。 定义 先看一下其定义&#xff1a; OpenCV是一个基于Apache2.0许可&#xff08;开源&#xff09;发行的跨平台计算机视觉和机器学习软件库&#xff0c;可以运行在Linux、Windows、…

vue3中的excel表导出功能(选中导出或导出所有,也可支持vue2)

1.安装模块 npm install xlsx file-saver -S 2.文件导入 import * as XLSX from "xlsx"; import FileSaver from "file-saver" 3.整体代码(可选中导出或导出所有) <template><div><el-button type"warning" click"down&quo…

5.2 基于ROP漏洞挖掘与利用

通常情况下栈溢出可能造成的后果有两种&#xff0c;一类是本地提权另一类则是远程执行任意命令&#xff0c;通常C/C并没有提供智能化检查用户输入是否合法的功能&#xff0c;同时程序编写人员在编写代码时也很难始终检查栈是否会发生溢出&#xff0c;这就给恶意代码的溢出提供了…

Maven引入Jacoco插件后无法生成jacoco.exec执行文件

目录 jacoco.exec网上常见关于未生成jacoco.exec原因最终解决方案不生效原因解决方案 完整jacoco插件配置 jacoco.exec 执行数据文件&#xff0c;只有生成该文件&#xff0c;才表示引入插件jacoco成功生效 网上常见关于未生成jacoco.exec原因 网上找了一下解决方式基本都是…

React Dva修改路由设置,不要井号

我们Dva项目的路由 他默认是设置了带井号的这种 其实我觉得到还可以 但是有些人会觉得不太美观 如果 你想去除他 那么 你先要在终端执行 npm install --save history将 history 引入进来 装好之后 我们来到src下的 index.js 加上如下代码 import {createBrowserHistory as …

C 13300000000 代表 C 呼入电话

先欣赏一个美图吧 给一个序列 C 13300000000 代表 C 呼入电话 &#xff0c;电话号码 13300000000 W 037128* 代表 W 白名单 &#xff0c;后面可以模糊匹配&#xff0c;而且保证出现在最后一个 如果呼入时电话在白名单中&#xff0c;则可以呼入&#xff0c;否则拒绝 请按输…

拖拽示教功能块(含算法介绍和完整SCL ST源代码)

这篇博客介绍简单拖拽示教功能的简单原理,在了解示教功能之前大家需要熟悉运动控制相关的内容,这篇博客我们以脉冲驱动为例介绍,所以大家可以先熟悉下脉冲控制功能块,有关运动控制的相关内容,可以查看运动控制专栏,主要链接如下: SMART PLC和V90伺服实现外部脉冲位置控…