[转]mpvue中的小程序调用系统自带查看图片的功能_mpvue小程序图片预览-优快云博客

本文介绍如何在Mpvue框架中实现小程序图片预览功能，通过示例代码展示了使用wx.previewImage方法的具体步骤，包括设置图片滑动组件及触发图片预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

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