(补充)微信长按识别二维码 -- 页面多个二维码如何识别?(二)
基于上一篇微信长按识别二维码 -- 页面多个二维码如何识别?
)在部分设备上,如果图片非常多,还是会出现识别错误的bug(主要是二维码显示一半或居于底部时),修改了识别流程,改为点击图片弹窗,然后长按识别。
页面布局,在列表页上覆盖一层大图div
<div id="tempQrCodeImgDiv" style="width:100%;height:100%; position:fixed; display:none;background:#efeff4;z-index:90;"><div style="text-align:center; font-size: 22px; margin-top:30px; color:#ff560e">长按图片识别二维码</div><img id="tempQrCodeImg" src="" style="width: 80%; margin-top:30px; margin-left:10%;z-index:100" /><div id="tempQrCodeName" style="text-align:center; font-size: 18px; margin-top:16px; color:#434243;" ></div><div id="tempQrCodeDismissBtn" style="text-align:center; font-size: 18px; margin-left:20%;margin-right:20%; margin-top:50px; padding: 10px 20px;border-radius: 5px; background:none; border: 1px #555 solid; color:#434243;">返 回</div>
</div>
<div style="text-align:center; font-size: 22px; margin-top:30px; color:#ff560e">单击图片放大后长按识别</div>
然后是列表页,与上文基本一致:
for (var i = 0; i < Model.settings.Count; i = i + 2)
{<div class="ne-cell flex"><div class="ne-grids col3 " style="flex:1"><div name="qrCodeImgDiv" style="text-align:center; width: 80%; margin-left:10%; margin-top:20px;"><img name="qrCodeImg" src="~/@Model.settings[i].QrCodePath" style="width: 100%; pointer-events: none;" alt="@Model.settings[i].Name"/></div><div id="div-name" style="text-align:center; margin-top:16px; color:#434243">@Model.settings[i].Name</div></div><div class="ne-grids col3 " style="flex:1">@if (i < Model.settings.Count - 1 && !string.IsNullOrEmpty(Model.settings[i + 1].QrCodePath)){<div name="qrCodeImgDiv" style="text-align:center; width: 80%; margin-left:10%; margin-top:20px; z-index:100"><img name="qrCodeImg" src="~/@Model.settings[i+1].QrCodePath" style="width: 100%; pointer-events: none; " alt="@Model.settings[i + 1].Name" /></div><div id="div-name" style="text-align:center; margin-top:16px; color:#434243">@Model.settings[i + 1].Name</div>}</div></div>
}
最后是js
function load() {var imgs = document.getElementsByName("qrCodeImgDiv");for (var i = 0; i < imgs.length; i++) {imgs[i].addEventListener("click", function () {var qrCodeImg = this.getElementsByTagName("img")[0];document.getElementById("tempQrCodeImg").src = qrCodeImg.src;document.getElementById("tempQrCodeName").textContent = qrCodeImg.alt;document.getElementById("tempQrCodeImgDiv").style.display = 'block';})}document.getElementById("tempQrCodeDismissBtn").addEventListener("click", function () {document.getElementById("tempQrCodeImg").src = "";document.getElementById("tempQrCodeName").textContent = "";document.getElementById("tempQrCodeImgDiv").style.display = 'none';})}window.addEventListener('load', load, false);
大部分样式都在代码中写成style了,列表页比较简答,用的css没有改过来,自己对应加下就ok了;毕竟这里主要是提供思路。
最终效果如下图:
ps:相对于之前代码,用户操作变得繁琐了,但是,在图片非常多时不会出现识别错误的bug;如果只有1~4张二维码,可以使用之前的版本长按二维码识别1;如果是图片较多,一页5-6张图片,而且有多页,则使用本文所述方法!当然,如果有更好的方案解决该问题,欢迎留言,多谢!
博客: IT老五 简书:ThinkinLiu
(补充)微信长按识别二维码 -- 页面多个二维码如何识别?(二)相关推荐
- iphone微信长按二维码识别不了
在安卓版的微信长按二维码可以识别(前提是你的微信版本到支持此功能),但是到了苹果版的微信就识别不了,经个人测试发现是缩放的问题: 1.设置了初始缩放设置为1,最大缩放值要>=1,不支持缩放.-- ...
- 生成二维码及微信长按识别二维码
参考网友文档: js生成二维码及解决二维码在微信中不能识别 来自 https://blog.csdn.net/qq_41429765/article/details/111915775?ops_req ...
- jquery实现微信长按识别二维码
jquery实现微信长按识别二维码 (完整代码如下) <!DOCTYPE html> <html> <head><meta charset="utf ...
- QQ+微信+支付宝收款一码付这么神奇,如何自己制作收款二维码
在2017年下半年第三方支付非常火,很多做偏门生意的boss们挣钱挣到手发软,随即一码付线下线上一码付收款付款开始流行.下面由商务信息网(www.6t12.com)小编教你自作QQ+微信+支付宝收款一 ...
- 使用二维码识别技术的好处_二维码门禁你知道支持多少种识别方式
时代在进步,随着移动互联网的蓬勃发展,手机成为我们生活中必不可少的工具.二维码门禁应运而生,它是安防市场的创新发展者,也是二维码门禁系统的一个重要设备.那么一个二维码门禁读卡器到底支持多少种识别方式呢 ...
- 微信官方提供的生成二维码接口得到的是当前公众号的二维码
转自:http://blog.csdn.net/phil_jing/article/details/53910083 微信官方提供的生成二维码接口得到的是当前公众号的二维码,官方文档 目前有2种类型的 ...
- 微信官方提供的生成二维码接口得到的是当前公众号的二维码。
一定说明,这种方法我还没有测试,如果有疑问欢迎在评论区域讨论. .................... ................... 谢谢. 微信官方提供的生成二维码接口得到的是当前公众号 ...
- 实现手机扫描二维码页面登录,类似web微信-第一篇,业务分析
关于XMPP组件的文章,先休息两天,好歹已经完整的写了一份. 这两天,先实现一套关于web微信扫描二维码页面登录的试验,因为这种模式在我们的很多业务场景里大有前途. 首先介绍一下web微信登录的过程 ...
- r720支持多少频率的内存吗_二维码门禁你知道支持多少种识别方式吗?
时代在进步,随着移动互联网的蓬勃发展,手机成为我们生活中必不可少的工具.二维码门禁应运而生,它是安防市场的创新发展者,也是二维码门禁系统的一个重要设备.那么一个二维码门禁读卡器到底支持多少种识别方式呢 ...
最新文章
- EasyUI——常见用法总结
- NTLM在使用代理服务器的情况下,第三次握手可能出错
- android webview和浏览器显示不一样_早道柔性LED显示屏,不一样的视界
- 使用socket创建服务器进程和客户端进程
- iptables中关于limit和limit-burst的解释
- C#编写窗体(Form)常用属性
- 用python庆祝生日_python, 实现朋友家人年历生日自动提醒
- 计算机网络在地理信息系统中应用,计算机网络在地理信息系统中有哪些应用?...
- 动态规划 —— 求解二项式系数
- HTML教程笔记(菜鸟教程)
- 20155218 《Java程序设计》实验二(Java面向对象程序设计)实验报告
- 云计算成就代码之美——首届阿里云开发者大赛巡礼
- 帆软加密狗注册配置安装步骤
- IPD需求和市场管理流程
- 【Python】pathlib 模块的用法(Path)
- 开心网竞争对手不是校内网
- 字节跳动安全AI挑战赛总结
- html页面打包为小程序
- 小爱音箱 电脑 麦克风_开箱,小米小爱音箱万能遥控版,这样的操作你知道吗?...
- 使用MobLink点击链接打开app