mpvue中的小程序调用系统自带查看图片的功能

这里举个栗子：

    <template><div class="keting"><div class="centsimg dja"><swiper:current="curr"display-multiple-items="1"next-margin="0rpx"class="fl prossgg marbtn50"v-if="urls.length > 0"@change='onSlideChangeEnd'><block v-for="(item,ind) in urls" :key="ind+1"><swiper-item class="widssgg fl"><div class="dja" style="height:100%"><img  @click="previewImg(ind)" :src="item.img" :style="{'width':width || '750rpx','height':height || '420rpx'}" class="img" ></div><div class="fixbt"><span class="fl">{{curr+1}}/{{urls.length}}</span><span class="fr font28 dja closes"><i v-show="item.shoucan"><img src="/static/images/yishoucan.png" style="width:38rpx;height:38rpx;margin-right:5rpx;"/>收藏图片</i></span><span class="fr font28 dja"><i v-show="!item.shoucan"><img src="/static/images/weishoucan.png" style="width:38rpx;height:38rpx;margin-right:5rpx;"/>收藏图片</i></span></div></swiper-item></block></swiper></div></div></template>

js是这样写的：

    <script>export default {data() {return {curr:0,urls:[{shoucan:false,img:"http://mss.sankuai.com/v1/mss_51a7233366a4427fa6132a6ce72dbe54/newsPicture/05558951-de60-49fb-b674-dd906c8897a6"},{shoucan:true,img:"http://mss.sankuai.com/v1/mss_51a7233366a4427fa6132a6ce72dbe54/coursePicture/0fbcfdf7-0040-4692-8f84-78bb21f3395d",}]};},methods: {onSlideChangeEnd(e){this.curr=e.target.current;},previewImg(ind) {let that = this;that.curr=ind;//wx.previewImage的urls必须是数组的形式，所以用下面的方法先转换为数组var jsonText =new Array(that.urls[ind].img);console.log(jsonText);//最主要就是调用这个wx.previewImage({current: that.urls[ind].img,urls: jsonText});},},};</script>

---------------------
作者：做块泥
来源：CSDN
原文：https://blog.csdn.net/weixin_37787674/article/details/89674100
版权声明：本文为作者原创文章，转载请附上博文链接！
内容解析By：CSDN,CNBLOG博客文章一键转载插件