微信小程序的实现图片预览功能

Posted 安卓笔记侠

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序的实现图片预览功能相关的知识,希望对你有一定的参考价值。

index.wxml

<image src="../../images/01.jpg"class="userinfo-avatar"  bindtap="previewImg01" background-size="cover"mode="aspectFill"></image>

index.js

 //图片预览功能
  previewImg01: function (event) {
    var ImageLinkArray = [
      "http://a3.qpic.cn/psb?/V14aANop0J23cs/by0tCeCk26u5RFQBIuS9K23hB19j5WeSDqQX44B3iLY!/b/dPIAAAAAAAAA&bo=WAIgAwAAAAARAE4!&rf=viewer_4",
      "http://a2.qpic.cn/psb?/V14aANop0J23cs/tAXXhUlDWmD8HqD8Fm8D2OwYHjh4VudDDCedhRGzCoU!/b/dD8BAAAAAAAA&bo=WAIgAwAAAAARAE4!&rf=viewer_4",
      "http://a3.qpic.cn/psb?/V14aANop0J23cs/lh16VB1AiLzE40J.yw1wHzFkRubnvPS6xv9wmMB0c04!/b/dPIAAAAAAAAA&bo=gAJWAwAAAAARAOA!&rf=viewer_4",
      "http://a3.qpic.cn/psb?/V14aANop0J23cs/h*sdKjZOUTnfPHBL91YJSiys60FAYcHPxntLJnaCEAE!/b/dPIAAAAAAAAA&bo=IANYAgAAAAARAE4!&rf=viewer_4",
      "http://a3.qpic.cn/psb?/V14aANop0J23cs/L23D8.qj6hqX3qYk92KGr1y.ej1kMpk8Szf6fXqN.fA!/b/dPIAAAAAAAAA&bo=WAIgAwAAAAARB0k!&rf=viewer_4"
      ]
    wx.previewImage({
      current: ImageLinkArray[0], // 当前显示图片的http链接
      urls: ImageLinkArray ,// 需要预览的图片http链接列表
    })
  },

  

以上是关于微信小程序的实现图片预览功能的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序实现图片预览(闭眼cv)

微信小程序如何一边看效果图一边编辑

微信小程序--图片相关问题合辑

微信小程序实现预览图片

微信小程序上传图片+图片预览

微信小程序--bindtap参数传递,配合wx.previewImage实现多张缩略图预览