微信小程序使用for循环展示图片，如果点击其中一个怎么获取该图片的src

在小程序中使用循环来展示图片时，可以使用 wx:for 指令。在使用 wx:for 指令时，可以使用变量来控制当前循环项。

举个例子，如果要循环展示图片列表，可以这样写：

<view wx:for="{{images}}" wx:key="src">
    <image src="{{item}}" bindtap="getSrc"></image>
</view>

在这个例子中，images 数组存储了图片的地址。在循环中使用 item 变量来获取当前循环项的地址。然后在 bindtap 事件上面可以指定点击之后的触发的方法，在方法里面就可以获取到图片的 src

JS部分的代码

Page({
  data: {
    images: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg'
    ]
  },
  getSrc: function(event) {
    console.log(event.currentTarget.dataset.src)
  }
})

在getSrc里面就可以获取到点击图片的src了

通过event.currentTarget.dataset.src 就可以获取图片的地址了.

相关问题

微信小程序使用for循环，实现左边大图，右边分4区块放小图

要实现微信小程序中使用for循环来实现左侧大图和右侧四个小图的布局，可以使用```<block>```标签和```wx:for```指令来实现。具体实现步骤如下：

首先，在WXML中定义一个```<block>```标签来包裹左侧大图和右侧四个小图，如下所示：

<block wx:for="{{images}}" wx:key="index">
   <view class="container">
      <image class="left-image" src="{{item.leftImageUrl}}"></image>
      <view class="right-images">
         <image class="right-image" src="{{item.rightImageUrl1}}"></image>
         <image class="right-image" src="{{item.rightImageUrl2}}"></image>
         <view class="right-images-row">
            <image class="right-image" src="{{item.rightImageUrl3}}"></image>
            <image class="right-image" src="{{item.rightImageUrl4}}"></image>
         </view>
      </view>
   </view>
</block>

其中，```images```为数据源，```leftImageUrl```为左侧大图的图片链接，```rightImageUrl1```至```rightImageUrl4```为右侧小图的图片链接。

接下来，在JS文件中定义数据源，如下所示：

Page({
   data: {
      images: [
         {
            leftImageUrl: 'LEFT_IMAGE_URL_1',
            rightImageUrl1: 'RIGHT_IMAGE_URL_1_1',
            rightImageUrl2: 'RIGHT_IMAGE_URL_1_2',
            rightImageUrl3: 'RIGHT_IMAGE_URL_1_3',
            rightImageUrl4: 'RIGHT_IMAGE_URL_1_4'
         },
         {
            leftImageUrl: 'LEFT_IMAGE_URL_2',
            rightImageUrl1: 'RIGHT_IMAGE_URL_2_1',
            rightImageUrl2: 'RIGHT_IMAGE_URL_2_2',
            rightImageUrl3: 'RIGHT_IMAGE_URL_2_3',
            rightImageUrl4: 'RIGHT_IMAGE_URL_2_4'
         },
         {
            leftImageUrl: 'LEFT_IMAGE_URL_3',
            rightImageUrl1: 'RIGHT_IMAGE_URL_3_1',
            rightImageUrl2: 'RIGHT_IMAGE_URL_3_2',
            rightImageUrl3: 'RIGHT_IMAGE_URL_3_3',
            rightImageUrl4: 'RIGHT_IMAGE_URL_3_4'
         }
      ]
   },
   onLoad: function () {}
})

其中，```LEFT_IMAGE_URL_1```至```LEFT_IMAGE_URL_3```为左侧大图的图片链接，```RIGHT_IMAGE_URL_1_1```至```RIGHT_IMAGE_URL_3_4```为右侧小图的图片链接。

最后，在WXSS中定义布局样式，如下所示：

.container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
}

.left-image {
   width: 60%;
   height: 100%;
}

.right-images {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 38%;
   height: 100%;
}

.right-images-row {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
}

.right-image {
   width: 100%;
   height: 48%;
   border-radius: 5px;
}

其中，```container```为整个布局的样式类，```left-image```和```right-images```分别为左侧大图和右侧小图的样式类，```right-images-row```为右侧小图的一行，```right-image```为右侧小图的样式类，```border-radius```为圆角样式。由于这里使用了```wx:for```指令，所以样式类的定义需要写在```<block>```标签外面，以适用所有循环的元素。

微信小程序循环输出图片对象

要循环输出图片对象，可以使用小程序的wx:for循环和wx:for-item、wx:for-index属性来实现。具体的步骤如下：

1.在wxml文件中，定义一个图片列表的区域，使用wx:for循环遍历图片列表，并使用wx:for-item和wx:for-index属性获取当前项的数据和索引。

<view>
  <block wx:for="{{imageList}}" wx:for-item="image" wx:for-index="index">
    <image src="{{image.src}}" mode="aspectFit"></image>
  </block>
</view>

2.在js文件中，定义一个图片列表的数组，将需要展示的图片的路径和其他相关信息存储在一个对象中，并将该对象存储在数组中，然后将该数组赋值给data中的imageList变量。

Page({
  data: {
    imageList: [
      {
        src: 'image1.jpg',
        name: '图片1',
        // ...其他图片相关信息
      },
      {
        src: 'image2.jpg',
        name: '图片2',
        // ...其他图片相关信息
      },
      {
        src: 'image3.jpg',
        name: '图片3',
        // ...其他图片相关信息
      },
      // ...其他图片对象
    ]
  },
  // ...其他代码
})

这样就可以循环输出图片对象了，每个图片对象会根据wx:for属性循环渲染一次。在wxml中，可以使用{{image.属性名}}的方式获取对象中的属性值。例如上面的代码中，使用{{image.src}}来获取图片的路径。