在开发微慕WordPress小程序企业官网小程序时遇到了多图片预览的问题,看了网上很多教程写的都是下边这种形式:
pictures: [ 'https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',
'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg',
'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg',
'https://p1.meituan.net/movie/45f98822bd15082ae3932b6108b17a01265779.jpg',
'https://p1.meituan.net/movie/722de9a7b0c1f9c262162d87eccaec7c451290.jpg',
'https://p0.meituan.net/movie/cb9be5bbedb78ce2ef8e83c93f83caca474393.jpg',
'https://p1.meituan.net/movie/a852b992cdec15319c717ba9fa9b7a35406466.jpg',
'https://p1.meituan.net/movie/dc1f94811793e9c653170cba7b05bf3e484939.jpg'
]
但是我们后端传过来的数据都是数组形式:
minimgs: [
0: {
image: "https://media.ifanrusercontent.com/user_files/trochili/a2/49/a249a6b48c6d4119d998f45d0a0ef825d94c2c10-6657b840c915b7e18fb6a28143b64d518138a072.jpg"
}
1: {
image: "https://media.ifanrusercontent.com/user_files/trochili/3f/66/3f66ee54a333adcff4553c962d053fcd6fb23938-d0a27e952eaa33e34bc2a5f68b970346ac5410d9.png"
}
2: {
image: "https://media.ifanrusercontent.com/user_files/trochili/c2/7e/c27ef2b85a8b004066644d0264bee41514abe037-d34d7c313535dd7a832da859d4b63c1183e5776b.jpg"
}
3: {
image: "https://media.ifanrusercontent.com/user_files/trochili/77/3d/773dddd66def088314cb454642c31d6e7375aa57-4e693b0db16ef85a7bd5f8885f48c5614c66db8e.jpg"
}
]
所以只好自己写个处理,在这里分享出来
首先我们要把这个数组数据在获取成功之后改一下:
var images = []
for (var index in res.data.acf.minimgs) {
images[index] = res.data.acf.minimgs[index].image;
}
self.setData({
title: response.data.title.rendered,
acf: response.data.acf,
imageList:response.data.acf.minimgs,
images:images,
postID: id,
});
这样获取到的images就成了下边这样
这样就可以了!
wxml:
<view class="minimg">
<block wx:for="{{acf.minimgs}}" wx:key="image" wx:item="image">
<view>
<image class="minimg_item" src="{{item.image}}" data-src="{{item.image}}" bindtap="previewImg" mode="aspectFill">
</image>
</view>
</block>
</view>
js:
previewImg: function (e) {
console.log(this.data.acf.minimgs);
var current = e.currentTarget.dataset.src;
var imgList = this.data.images;
wx.previewImage({
current: current, // 当前显示图片的http链接
urls: imgList //所有要预览的图片的地址集合 数组形式
})
},