<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数据了。建议使用第二种方式(只绑定必要数据),因为传输数据量更小,性能更好。