小程序中获取元素属性并传递给另一元素

最新推荐文章于 2025-06-19 10:44:46 发布

原创最新推荐文章于 2025-06-19 10:44:46 发布 · 5.3k 阅读

1 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现数据绑定的方法，通过使用data-[属性名]来传递和更新视图中的图片源，详细展示了如何在不支持DOM操作的小程序环境中，利用WXML和JS的数据绑定机制完成视图的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为小程序不支持DOM节点的操作，所以只能用data-[属性名]去实现，然后在注册页面中实现

<view class='setVoiceFooter'>
      <view class='sexIcon' bindtap='chooseBoy'>
      <!--从这里取值传递给下面有注释的元素-->
        <image data-src='../../image/u664.jpg' src='../../image/u664.jpg'></image>
      </view>
  </view>
  <view class="setType {{showType?'':'hidden'}}">
    <view class='{{item.class}}' wx:for="{{loop}}" wx:key="id" data-id='{{item.id}}' style='display:{{item.visible}}'>
      <view wx:if='{{item.id == 1}}' class='certainSexIcon'>
          <!--从上面取到的src属性值赋给该元素 -->
        <image src='{{item.opt}}'></image>
      </view>
      <view wx:else class='session'>{{item.opt}}</view>
    </view>

注册页面中的实现方法

data: {
    loop: [
      {
        opt: "",
        id: 1,
        class: 'send',
        visible: 'flex'
      }
    ]
  },
chooseGirl: function(e) {
    this.setData({
      showVoice: 0,
      showType: 1,
      // loop[0].opt 必须加''，不然是错误的写法，报错，昨天就是在这个地方踩了好久的坑
      'loop[0].opt': e.target.dataset.src
    })
    console.log(this.data.loop[0].opt);
  }