非微信图文网页在微信中点击放大滑动阅读

2024年4月28日 163次阅读 来源: gg_bomb

在微信图文网页中，当点击图片时会放大图片并支撑滑动阅读，那末，非微信图文在微信中阅读时，当点击图片后，怎样才到达这类结果了？幸亏微信民众号的js-sdk中供应了图片预览接口：

wx.previewImage({
    current: '', // 当前显现图片的http链接
    urls: [] // 须要预览的图片http链接列表
});

1.为了简化代码，起首引入jq（此处省略），第一步则是猎取图片, obj为图片容器，例入(“wraper img”)。

        function getImg(obj){
            var m = [];
            for(var i=0; i< obj.length; i++){
                m[i] = obj[i].src;
            }
            
            return m;
        }

2.新建函数preview，用来挪用微信图片预览接口，代码以下：

                function preview(current, urls){
                    if(!current || urls.length == 0){
                        return ;
                    }
                    WeixinJSBridge.invoke('imagePreview', { 
                        'current': current,
                        'urls': urls
                    });
                }

3.新建点击图片的函数img_click;其意义是当点击图片时，把一切要显现的图片存入数组而且传递给js-sdk的图片预览接口，然后放大显现图片，代码以下：

        function imgClick(obj){
            $(obj).click(function(){
                var src = getImg(obj);
                var curent = $(this).index();
                preview(src[curent], src);
            });
        }

4.末了当挪用实行imgClick即可

    原文作者：gg_bomb
    原文地址: https://segmentfault.com/a/1190000004963000
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞