微信公众号H5点击图片预览(可放大缩小),用微信内置jssdk实现

在微信公众号H5里面可能会遇到点击图片预览,还可以放大缩小,微信内置有这个功能可以实现

用vue写项目的话,先

cnpm install weixin-js-sdk --save

接着给图片一个点击事件

<img src="" alt="" @click="preview()">

data:{
url:""  //图片地址,
imgList:[]
}

methods:{
 preview(){
    const _this = this;
      let nowImgUrl = this.url;
      if (!_this.imgList.includes(nowImgUrl)) {
            _this.imgList.push(nowImgUrl);
           }
            WeixinJSBridge.invoke("imagePreview", {
                urls: _this.imgList,
                current: nowImgUrl,
            })
    },
}

在微信开发者工具里面无法显示这个效果,只有在手机上才会有这个效果,所以建议在手机上调试

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值