微信小程序 预览图片 wx.previewImage

方式一

此方法用在显示一个数组的对象的图片,小程序柱钢筋计算改用此种

<view class="imgbox" wx:for="{{list}}" wx:key="index">
<image src="{{item}}" data-index="{{index}}" bindtap="previewImg"></image>
</view>

此方法会触发 onshow()函数

previewImg(e) {
//获取当前图片的下标
var index = e.currentTarget.dataset.index;
//所有图片
var imgs = this.data.list;
// console.log(imgs[index]);
wx.previewImage({
//当前显示图片
current: imgs[index],
//所有图片
urls: imgs
})
},

原文链接:https://blog.csdn.net/liuxiaocaie/article/details/121745102

方式二

data: {

// 大图地址 对象形式
listData: {
imgUrlZj: "https://source.coyis.com/wximg/gangjin/kjzhugj-zj.png",
imgUrGj: "https://source.coyis.com/wximg/gangjin/kjlianggj-lj.png",
imgUrlGj01: "https://source.coyis.com/wximg/gangjin/kjzhugj-gj-01.png",
imgUrlGj02: "https://source.coyis.com/wximg/gangjin/kjzhugj-gj-02.png",
imgUrlGj03: "https://source.coyis.com/wximg/gangjin/kjzhugj-gj-03.png",
},
// 大图地址列表 数组形式
listData2: [
"https://source.coyis.com/wximg/gangjin/kjzhugj-zj.png",
"https://source.coyis.com/wximg/gangjin/kjzhugj-gj-01.png",
'https://source.coyis.com/wximg/gangjin/kjlianggj-lj.png',
"https://source.coyis.com/wximg/gangjin/kjzhugj-gj-02.png",
"https://source.coyis.com/wximg/gangjin/kjzhugj-gj-03.png",
],

},

// 图片点击事件
previewSqs(event) {
// 拿到图片的地址url
let currentUrl = event.currentTarget.dataset.src;
console.log('currentUrl图片地址:', currentUrl)
// 微信预览图片的方法
// var imgUrl = event.currentTarget.dataset.src
let imgUrl = this.data.listData2
console.log('imgUrl图片地址:', imgUrl)
wx.previewImage({
current: currentUrl, // 图片的地址url
urls: imgUrl // 预览的地址url 列表
})
},

wxml文件

<view class="imgys scroll-item">
  <image mode="aspectFit" src="https://source.coyis.com/wximg/gangjin/kjzhugj-gj-01.png" bindtap="previewSqs" data-src="{{listData.imgUrlGj01}}"></image>
</view>
未经允许不得转载:Song It » 微信小程序 预览图片 wx.previewImage

相关文章

评论 (0)