掌握小程序中使用 for 循环获取图片 src 的独门秘籍

2024-01-04 03:53:42

在小程序中获取 for 循环图片 src 的巧妙方法

在小程序开发中，使用 for 循环来展示图片是一种常见的场景。然而，当我们需要获取点击图片的 src 时，就会遇到一定的挑战。本篇博客将深入探讨这个问题，并提供一个巧妙的解决方案，让你轻松获取图片的 src，为小程序开发增添一份便利。

理解小程序的 for 循环

小程序中，可以使用 wx:for 指令来创建循环，从而遍历数组或对象。该指令提供了两个关键属性：wx:for 和 wx:key。wx:for 指定要遍历的数据源，而 wx:key 则指定循环项的唯一标识符。

例如，要循环遍历一个名为 images 的数组，并显示每张图片，可以使用以下代码：

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

在这个代码中，wx:for="{{images}}" 指定要遍历 images 数组，wx:key="src" 指定使用图片的 src 作为唯一标识符。

获取图片 src 的挑战

当点击图片时，会触发 bindtap 事件。通常情况下，我们希望获取点击图片的 src，以便进行进一步处理。然而，直接使用 e.target.src 是无法获取到正确 src 的。这是因为小程序在循环中使用了一个特殊的视图，该视图会将实际图片的 src 设置为一个随机的占位符 src。

巧妙的解决方案

为了解决这个问题，我们可以利用 事件冒泡 的特性。当点击图片时，事件会从图片本身冒泡到包含它的视图，即 wx:for 循环项。因此，我们可以监听 wx:for 循环项的 bindtap 事件，并通过 e.currentTarget.dataset.src 获取图片的实际 src。

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

在这个代码中，我们在 image 元素中添加了一个 data-src 属性，其值为图片的实际 src。当点击图片时，事件会冒泡到 wx:for 循环项，而 e.currentTarget.dataset.src 就可以获取图片的实际 src。

实例演示

Page({
  data: {
    images: [
      'https://example.com/image1.png',
      'https://example.com/image2.png',
      'https://example.com/image3.png'
    ]
  },

  getSrc(e) {
    const src = e.currentTarget.dataset.src;
    console.log(src);
  }
})

在上面的代码中，我们创建了一个名为 getSrc 的函数，用于处理 wx:for 循环项的 bindtap 事件。当点击图片时，该函数将被触发，并将图片的 src 打印到控制台。