2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 移动端查看预览图片放大缩小

移动端查看预览图片放大缩小

时间:2019-11-17 11:42:44

相关推荐

移动端查看预览图片放大缩小

方法一

之前介绍过一款 移动端vue适用的插件大全 /MtangEr/article/details/85339092 里边有一篇是查看图片放大缩小的 /docs/#/lightbox,自行去里边进行知识学习。

方法二

采用微信自带的点击查看预览图片,并且放大缩小

实现方法:

1.先在全局引入 微信的js

<script type="text/JavaScript" src="http://res./open/js/jweixin-1.4.0.js"></script>

2.在需要放大图片所在的文件内引入方法

funcReadImgInfo (imgObj) {var imgs = []for (var i = 0; i < imgObj.length; i++) {imgs.push(imgObj.eq(i).attr('src'))imgObj.eq(i).click(function () {var nowImgurl = $(this).attr('src')WeixinJSBridge.invoke('imagePreview', {'urls': imgs,'current': nowImgurl})})}},//在方法中传入一个多张图片路径的数组,将每个路径循环处理,装到img的src内,然后再将整个img数组imgs 进行微信预览图片放大处理。这样就完成了。适用于:多张图片的轮播图 banner图,每张图都可以点开放大预览,对于只展示单张图片的情况:funcReadImgInfo (imgs,index) { WeixinJSBridge.invoke('imagePreview', {'urls': imgs,'current': imgs[index]})},//在方法中 第一个参数传 只有一张图片路径的数组(将这一张图片通过split(',')的方法转换成只有一张图片的数组); 第二个参数传 数组下标(因为只有一张图片,即这张图片的下标就是0)。html中代码如下<img class="imageshow" v-if="picurl!=null" :src="picurl.split(',')[0]" @click="funcReadImgInfo(spicurl.split(','),0)" alt="">

3、注意

a.测试效果要在微信上测试(在电脑浏览器测试会报错)

b.如果在微信上测试,点击预览后出现一直在加载无法显示的情况,建议查看图片的路径是否正确,把图片的路径设置成全路径。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。