<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數據了。建議使用第二種方式（只綁定必要數據），因為傳輸數據量更小，性能更好。
)
(中))
