WordPress小程序开发之多图数组实现点击预览及切换预览图片

最新推荐文章于 2022-11-29 11:15:42 发布

Wordpress小程序

最新推荐文章于 2022-11-29 11:15:42 发布

阅读量570

点赞数

分类专栏：小程序文章标签： WordPress 小程序图片预览数组转换前端开发

本文链接：https://blog.csdn.net/u011642200/article/details/116400327

版权

小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在开发微慕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 //所有要预览的图片的地址集合 数组形式

    })
  },