非微信图文网页在微信中点击放大滑动浏览

在微信图文网页中,当点击图片时会放大图片并支持滑动浏览,那么,非微信图文在微信中浏览时,当点击图片后,怎么才能达到这种效果了?好在微信公众号的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的图片预览接口,而后放大显示图片,代码以下:this

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

4.最后当调用执行imgClick便可url

相关文章
相关标签/搜索