微信小程序中的data-属性使用——绑定列表点击项属性（带代码示例）

2024-05-05 15:57
12人已看

一、作用：

在小程序中，可以通过data-开头的自定义属性来给元素附加数据，以便在事件处理或者其他操作中获取这些数据。（非常方便传递列表中点击项的特定数据——如绑定商品列表项的id属性）

二、代码示例：

<view class="signgoodsList" wx:for="{{signgoodsList}}" wx:key="id">
            <view class="item"  bindtap="navigateToDetails" data-id="{{item.id}}" >
                <image class="itemImg " src="{{item.picture}}" mode="aspectFill" />
                <view class="info">
                    <text class="bookName">{{item.name}}</text>
                    <text class="address">交易地址：{{item.address}}</text>
                    <text>价格：{{item.price}}元</text>
                </view>      
                <!--点击取消商品收藏-->
                <image class="itemImg2 " data-id="{{item.id}}" src="/assets/image/取消收藏.png" mode="aspectFill" catch:tap="cancelSign" />                        
            </view>            
</view>

在给定的代码片段中，`data-id` 是一个自定义属性（在微信小程序开发中常见），它用于存储并传递数据到对应的事件处理函数中。

`data-id="{{item.id}}"` 这个表达式的作用是将数据项 `item` 中的 `id` 属性值绑定到当前组件的 `data-id` 属性上。例如：

在 `<view class="item" bindtap="navigateToDetails" data-id="{{item.id}}" >` 中，当用户点击这个 view 视图时，触发 `navigateToDetails` 事件，并且可以通过事件对象 e.currentTarget.dataset.id 获取到对应的 `item.id` 值，用于导航到详情页并携带商品ID等信息。
在 `<image class="itemImg2 " data-id="{{item.id}}" src="/assets/image/取消收藏.png" mode="aspectFill" catch:tap="cancelSign" />` 中，当用户点击这个图片时，触发 `cancelSign` 事件，同样可以通过 `e.currentTarget.dataset.id` 获取到商品ID，用于执行取消收藏商品等相关操作。

简而言之，`data-id` 是一个用于临时存储和传递数据的属性，方便在不同组件间或同一组件内进行数据交互。