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

比如我们有一个列表,点击每个列表中每个子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;

再仔细看下。