微信小程序（组件--收藏案例）

最新推荐文章于 2022-08-02 15:39:51 发布

原创

最新推荐文章于 2022-08-02 15:39:51 发布 · 1.2k 阅读

11 ·

CC 4.0 BY-SA版权

【前言】
本节主要介绍下常见的收藏功能的实现
在这里插入图片描述

需求分析

样式分析：

未收藏时为灰色态，点击收藏按钮，图标变色，同时弹框实体收藏成功；
收藏成功后，点击已收藏的商品，取消收藏，此时图标恢复为灰色态，同时弹框提示取消收藏成功。

逻辑分析：

每个商品单独绑定个数据，负责管理收藏状态，点击时判断状态，然后切换

收藏功能

（1）先将图片静态样式写入

<view class="goodsList">
  <view class="goodBox" 
  bindtap="toDetail" 
  data-item="{
   
   {item}}" 
  wx:for="{
   
   {goods}}" 
  wx:key="name">
    <navigator url="/pages/zhuanti/shangcheng/shangcheng?name={
   
   {item.name}}&src={
   
   {item.imgSrc}}&price={
   
   {item.price}}">
      <image class="goodImg" src="{
   
   {item.imgSrc}}"></image>
      <view class="goodName">{
   
   {
   
   item.name}} {
   
   {
   
   item.price}}￥</view>
    </navigator>
    <image data-index="{
   
   {index}}" 
    bindtap="selectFn" 
    class="selectStar"
    src="{
   
   {item.collectStatus == true?'../../static/tabs/like-on.png':'../../static/tabs/like.png'}}"></image>
  </view>
</view>

.goodsList{
   
   
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}
.goodBox{
   
   
  width: 45%;
  height: 400rpx;
  margin