小程序点击之数据绑定

<return />

<view class="all-wrap" style="padding-top:{{topHeight}}px;">

<view class="my-title">我的收藏</view>

<scroll-view

class="collect-list-container"

scroll-y

scroll-top="{{scrollTop}}"

refresher-enabled="{{true}}"

refresher-default-style="white"

refresher-triggered="{{isRefreshing}}"

bindrefresherrefresh="onPullDownRefresh"

>

<!-- 收藏列表 -->

<block wx:if="{{sortedKeys.length === 0}}">

<view class="collectList-nodata">暂无收藏内容</view>

</block>

<block wx:for="{{sortedKeys}}" wx:key="index" wx:for-item="type">

<view class="collect-part-title">{{type === 'FOOD' ? '美食卡' : (type === 'GOODS' ? '商品卡' : (type === 'ROUTE' ? '路线卡' : (type === 'KNOWLEDGE' ? '知识卡' : (type === 'ATTRACTION_VIEW' ? '景点卡' : (type === 'ATTRACTION_GUIDE' ? '讲解卡' : '')))))}}</view>

<scroll-view scroll-x class="collect-items">

<block wx:for="{{sortedCollects[type]}}" wx:key="id">

<view class="collect-item" bind:tap="onCardDetailAction">

<image class="collect-image" src="{{item.cardData.privData.imageUrl}}" mode="aspectFill"></image>

<text class="collect-name">{{item.cardData.name}}</text>

</view>

</block>

</scroll-view>

</block>

</scroll-view>

</view>

我们如果想要在onCardDetailAction关联绑定数据,应该如何呢?

在WXML中,你需要给每个收藏项绑定数据,这样在点击事件中才能获取到对应的item数据。以下是修改方案:

1. 修改WXML,添加data-item属性:

xml

复制代码
<view class="collect-item" bind:tap="onCardDetailAction" data-item="{{item}}">
  <image class="collect-image" src="{{item.cardData.privData.imageUrl}}" mode="aspectFill"></image>
  <text class="collect-name">{{item.cardData.name}}</text>
</view>

2. 修改JS,通过dataset获取数据:

javascript

复制代码
// 卡片详情
onCardDetailAction(e) {
  console.log('卡片详情', e);
  
  // 获取绑定的item数据
  const item = e.currentTarget.dataset.item;
  console.log('点击的item数据:', item);
  
  // 这里可以继续处理跳转逻辑
  if (item && item.cardData) {
    const cardId = item.cardData.id;
    const cardType = item.cardData.type;
    const resourceId = item.cardData.resourceId;
    
    console.log('卡片ID:', cardId, '卡片类型:', cardType, '资源ID:', resourceId);
    
    // 根据卡片类型跳转到不同页面
    // wx.navigateTo({
    //   url: `/pages/cardDetail/cardDetail?cardId=${cardId}&type=${cardType}`
    // });
  }
}

3. 如果你需要更精确的数据,可以只绑定必要的数据:

xml

复制代码
<!-- 只绑定必要的数据,减少数据传输量 -->
<view class="collect-item" bind:tap="onCardDetailAction" 
      data-cardid="{{item.cardData.id}}" 
      data-type="{{item.cardData.type}}"
      data-resourceid="{{item.cardData.resourceId}}">
  <image class="collect-image" src="{{item.cardData.privData.imageUrl}}" mode="aspectFill"></image>
  <text class="collect-name">{{item.cardData.name}}</text>
</view>

对应的JS代码:

javascript

复制代码
// 卡片详情
onCardDetailAction(e) {
  const dataset = e.currentTarget.dataset;
  console.log('卡片详情数据:', dataset);
  
  const cardId = dataset.cardid;
  const cardType = dataset.type;
  const resourceId = dataset.resourceid;
  
  console.log('卡片ID:', cardId, '卡片类型:', cardType, '资源ID:', resourceId);
  
  // 根据卡片类型跳转到不同页面
  // if (cardType === 'ATTRACTION_GUIDE') {
  //   wx.navigateTo({
  //     url: `/pages/guideDetail/guideDetail?id=${cardId}`
  //   });
  // } else if (cardType === 'FOOD') {
  //   wx.navigateTo({
  //     url: `/pages/foodDetail/foodDetail?id=${cardId}`
  //   });
  // }
  // ...其他类型处理
}

这样修改后,点击事件就能获取到对应的item数据了。建议使用第二种方式(只绑定必要数据),因为传输数据量更小,性能更好。

相关推荐
Coodor8 小时前
碰一下可打开小程序,在web系统中如何嵌入将小程序写入NFC
前端·小程序·nfc
微信bysj79812 小时前
基于深度学习的车牌识别系统(源码+文档
java·人工智能·spring boot·后端·深度学习·微信小程序·小程序
夏小花花15 小时前
关于牙科、挂号、医生类小程序或管理系统项目 项目包含微信小程序和pc端两部分
前端·javascript·vue.js·微信小程序·小程序
毕设源码-朱学姐1 天前
【开题答辩全过程】以 基于微信小程序的体育场馆预约管理系统为例,包含答辩的问题和答案
微信小程序·小程序
开发加微信:hedian1161 天前
漫画短剧小程序系统开发:从0到1的核心架构与思路
微信·小程序
毕设源码-邱学长1 天前
【开题答辩全过程】以 健身爱好者饮食管理小程序为例,包含答辩的问题和答案
小程序
毕设源码-朱学姐1 天前
【开题答辩全过程】以 基于微信小程序的校园二手物品交易平台的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
给力学长1 天前
洗衣店小程序的设计与实现
java·数据库·vue.js·小程序·node.js
说私域1 天前
基于开源AI大模型AI智能名片S2B2C商城小程序的产地优势产品销售策略研究
人工智能·小程序