问题场景:

  下图中的显隐密码和验证码均为包裹在 input标签 中的 image标签,

  但在开发测试中发现点击不了这俩个image标签,因为是被input标签的padding挡住了。

解决方法:将image标签用position定位定到对应的位置

1、wxml:

<view class="position">
<input class="inputs psw" type="text" value="{{verificationCode}}" bindinput="verificationCodeChange" placeholder="请输入验证码">
</input>
<image class="code-img" src="{{codeImg}}" bindtap="getCode"></image>
</view>

2、scss:

.position{
position: relative;
image {
z-index: 10;
position: absolute;
top: 0;
right: 0;
padding: 30rpx;
width: 40rpx;
height: 40rpx;
}
.code-img {
width: 150rpx;
height: 70rpx;
margin-top: -16rpx;
}
}

微信小程序避坑指南——input框里的图标在部分安卓机里无法点击的问题的更多相关文章

  1. 微信小程序避坑指南

    如果对小程序还不熟悉,建议先看下另一篇小程序简介 1. 基础库和微信版本对应关系 iOS 客户端版本 基础库版本 6.7.2 2.3.0 6.7.0 2.2.5 6.6.7 2.1.3 6.6.6 2 ...

  2. 微信小程序避坑指南——echarts层级太高/层级遮挡

    问题:小程序中echarts因为小程序原生的canvas层级太高,而导致弹窗这类dom元素无法遮挡住canvas,如下图: 解决方案1:(wx:if控制dom显隐,显示canvas就重新渲染echar ...

  3. 两百条微信小程序跳坑指南(不定时更新)

    微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...

  4. 微信小程序填坑之旅(2)-wx.showLoading的时候,仍能点击穿透,造成重复点击button的问题

    解决办法:mask =true wx.showLoading({ title: '正在上传...', mask:true, })

  5. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  6. 微信小程序爬坑日记

    新公司上手小程序.30天,从入门到现在,还没放弃... 虽然小程序发布出来快一年了,爬坑的兄弟们大多把坑都踩平了.而我一直停留在"Hello World"的学习阶段.一来没项目,只 ...

  7. 微信小程序遮罩层覆盖input失效

    问题:微信小程序中,我们常使用遮罩层,如点击按钮弹出下拉框.弹框等等.若在遮罩层下存在input.textarea.canvas.camera.map.video等标签时,会出现遮罩层覆盖失效的问题. ...

  8. 微信小程序填坑之旅一(接入)

    一.小程序简介 小程序是什么? 首先“程序”这两个字我们不陌生.看看你手机上的各个软件,那就是程序.平时的程序是直接跑在我们原生的操作系统上面的.小程序是间接跑在原生系统上的.因为它嵌入在微信中,受微 ...

  9. 微信小程序入坑之自定义组件

    前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...

随机推荐

  1. notification(浏览器通知)

    一.notification简介 Web Notifications是HTML5 的一个特性,目前我知道的有谷歌浏览器和windows edge对它进行了支持,用于向用户配置和显示桌面通知. 二.no ...

  2. H5移动端开发

    开发前准备 环境: Node.js LTS版本 git 最新版 文档: 本项目技术栈基于 ES2016 VueJS vux 快速开始 1.克隆项目 git clone https://gitee.co ...

  3. 【uniapp 开发】字符串工具类 StringUtil

    替换字符串中的所有 "***" 子串 var str='Is this all there is'; var subStr=new RegExp('is','ig');//创建正则 ...

  4. setTimeout中第一个参数

    永远不要传递字符串作为setTimeout的第一个参数!!!记住第一个参数只允许函数,或者匿名函数!因为传递字符串有陷阱啊!!它就是披着羊皮的eval啊!!而且上下文会变成全局啊!! 第一个参数为可执 ...

  5. 带码农《手写Mybatis》进度3:实现映射器的注册和使用

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获!

  6. Mysql集群搭建-实操

    集群安装--准备工作 官网地址 https://dev.mysql.com/doc/refman/5.7/en/mysql-cluster-install-linux-binary.html 一.环境 ...

  7. 获取ul中li的value值

    <script> $(function(){ $(".month-list").find("li").click(function(){ var t ...

  8. 内网穿透NPS

    内网穿透实现 nps文档 https://ehang-io.github.io/nps/#/install nps docker镜像 https://hub.docker.com/r/ffdfgdfg ...

  9. 安卓记账本开发学习day4

    在代码层面,展示出来的界面应该如下图 但是实际运行效果如下图 很明显,"其他"都没有显示出来,经过一点点排查,发现是IncomeFragment.java文件的代码存在错误 @Nu ...

  10. DevExpress控件与VS和.NET各个版本的支持情况

    如下图所示,绿色Yes代表支持,红色No代表不支持.对于有些人觉得装了dev后,vs工具箱没有,一般都是以下两大问题: 1.要么你的Dev的版本不支持你当前的VS版本,没有很正常. 2.要么你的项目的 ...