微信小程序点击按钮获取数据（wx：for）

最新推荐文章于 2024-08-06 20:04:10 发布

在校秃头读书人

最新推荐文章于 2024-08-06 20:04:10 发布

阅读量4.8k

点赞数

文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/qq_51632935/article/details/126269258

版权

本文介绍了在微信小程序中使用`wx:for`遍历渲染数据时，如何通过点击事件获取对应的数据。对比了微信小程序与Vue的事件处理方式，并以一个具体的例子展示了在滑动单元格中，如何正确添加`data-id`属性来确保在bindtap事件中能获取到正确的id。

摘要由CSDN通过智能技术生成

因为微信小程序的语法和vue的不太一样，然后用vue用习惯了，边写小程序边学习小程序语法的路上有很多数据都没能顺利拿到。

对比一下两者：

vue是在点击事件的函数后面直接传参，例如：

<button @click = "submit(item.id)">点击获取数据</button>

但是微信小程序是：

<button data-id="{ {item.id}}" bindtap="submit">点击获取数据</button>

今天记录一下用wx：for渲染页面，点击按钮获取到相应的数据。这里用了vant的滑动单元格。

wxml：

     <van-swipe-cell right-width="{
  { 120 }}" wx:for="{
  {shareList}}" wx:key="index">
        <view data-id="{
  {_id}}">
          <view>
            <text>{
  {item.nickName}}</text>
            <text>{
  {item.currentTime}}</text>
          </view>
          <text>{
  {item.message}}</text>