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博客文章一鍵轉載插件

總結

以上是生活随笔為你收集整理的[转]mpvue中的小程序调用系统自带查看图片的功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。