微信小程序项目

微信小程序项目

58、商品详情页面_收藏功能②

商品详情 点击 图标切收藏

    <view class="goods_collect"><!--isCollect值为true加载icon-shoucang图标，false加载icon-shoucang1图标--><text class="iconfont {{isCollect?'icon-shoucang':'icon-shoucang1'}}"></text><view class="collect_text">收藏</view></view>

修改样式（选中icon-shoucang图标）
pagesgoos_detailindex.less

    .goods_collect{.icon-shoucang{color: var(--themeColor); /*主题颜色*/}}

给收藏图标绑定点击事件

    <view class="goods_collect" bindtap="handleCollect">...

pagesgoos_detailindex.js

  // 点击 商品收藏图标handleCollect(){let isCollect=false;// 1 获取缓存中的商品收藏数组let collect&#StorageSync("collect")||[];// 2 判断该商品是否被收藏过let index=collect.findIndex(v=&ds_id===ds_id);// 3 当index!=-1表示已经收藏过if(index!==-1){// 能找到已经收藏过了在数组中删除该商品collect.splice(index,1);isCollect=false;wx.showToast({title: '取消成功',icon: 'success',// true防止用户 手抖 疯狂点击按钮mask: true,});}else{// 没有收藏过collect.push(this.GoodsInfo);isCollect=true;wx.showToast({title: '收藏成功',icon: 'success',mask: true,});}// 4 把数组存入到缓存中wx.setStorageSync( "collect", collect);// 5 修改data中的属性iscollectthis.setData({isCollect})}

选中一个商品 点击收藏——>再换第二个商品 点击收藏