微信小程序组件自定义属性及获取属性

最新推荐文章于 2025-07-02 09:19:03 发布

zhoushenxian

最新推荐文章于 2025-07-02 09:19:03 发布

阅读量1.5w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/coderinchina/article/details/84071793

微信小程序专栏收录该内容

35 篇文章

订阅专栏

本文介绍在WXML中使用wx:for遍历列表并设置点击事件，通过自定义属性data-detailId将item的ID传入，利用onPostTap方法在事件中通过event.currentTarget.dataset.detailid获取具体ID值。

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

比如我们有一个列表,点击每个列表中每个子item,把id带到下一个页面

<import src="posts-item/posts-item-template.wxml" />
<view>
<block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx">
<view catchtap="onPostTap">
<template is="postItem" data="{{...item}}" />
</view>
</block>
</view>

比如现在这是我列表的布局,数据源json都有个id字段,我们点击子item去获取这个id的值,那我们自定义组件属性就很好实现

那么自定义属性的语法是什么样的呢？

data-x = "" 说明x是任意的取的比如x是detailId,那么我们在组件中是这么使用的

<view catchtap="onPostTap" data-detailId='{{item.id}}'>

那么通过代码怎么获取每条数据的id呢？

在这个onPostTap方法中获取id

 onPostTap:function(event){
    var id = event.currentTarget.dataset.detailid;
    console.log("id==="+id);
  },

参数event是系统给我们传递的事件,然后event.currentTarget是获取当前你点击的是哪个组件, event.currentTarget.dataset是获取自定义属性的集合,因为可以自定义很多个属性,event.currentTarget.dataset.detailid是获取具体某一个属性的值,在这要特别注意,我们在wxml自定义属性是data-detailId,会发现后面这个Id中的I是大写的,但是通过代码获取都会转为小写,

var id = event.currentTarget.dataset.detailid;

再仔细看下。