(補充)微信長按識別二維碼 -- 頁面多個二維碼如何識別？（二）

基於上一篇微信長按識別二維碼 -- 頁面多個二維碼如何識別？
)在部分設備上，如果圖片非常多，還是會出現識別錯誤的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;">返&emsp;回</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了；畢竟這裏主要是提供思路。

最終效果如下圖：

長按識別多個二維碼.gif

 

ps：相對於之前代碼，用戶操作變得繁瑣了，但是，在圖片非常多時不會出現識別錯誤的bug；如果只有1~4張二維碼，可以使用之前的版本長按二維碼識別1；如果是圖片較多，一頁5-6張圖片，而且有多頁，則使用本文所述方法！當然，如果有更好的方案解決該問題，歡迎留言，多謝！

博客: IT老五 簡書：ThinkinLiu

---

IT老五（it-lao5）：關注公衆號，一起源創，一起學習！