微信小程序项目_秋泊优选65

61、商品收藏_页面动态渲染

收藏页面的标签
pages\collect\index.wxml

<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange">
    <view class="collect_main">    
        <view class="collect_title">
            <text class="collect_tips active">全部</text>
            <text class="collect_tips">正在热卖</text>
            <text class="collect_tips">即将上线</text>
        </view>
        
        <view class="collect_content"></view>
    </view>
</Tabs>

收藏页面样式
pages\collect\index.less

page{

}
.collect_main{
    background-color: #f3f4f6;
    .collect_title{
        padding: 30rpx 0;
        .collect_tips{
            padding: 15rpx;
            border:1rpx solid#ccc;
            margin-left: 25rpx;
            background-color: #fff;
        }
        /*激活选中的类*/
        .active{
            color: var(--themeColor);
            border-color: currentColor;
        }
    }    
    .collect_content{}
}

显示被收藏的商品列表（从缓存中获取数据）
pages\collect\index.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    collect:[],
    tabs:[...]
  },

  onShow(){
    const collect=wx.getStorageSync( "collect")||[];
    this.setData({
      collect
    });
  },

商品详情页面——点击收藏——>编译商品收藏页面

与 商品列表页面 标签结构 和 样式 类似（只需修改）

pages\goods_list\index.wxml——>pages\collect\index.wxml

<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange">
    <view class="collect_main">    
        <view class="collect_title">
            <text class="collect_tips active">全部</text>
            <text class="collect_tips">正在热卖</text>
            <text class="collect_tips">即将上线</text>
        </view>
        
        <view class="collect_content">
        	<!--注意这里wx:for循环数据是collect-->
            <navigator class="goods_item"
            wx:for="{{collect}}"
            wx:key="goods_id"
            url="/pages/goos_detail/index?goods_id={{item.goods_id}}"
            >
                <!--左侧图片容器-->
                <view class="goods_img_wrap">
                    <image mode="widthFix" src="{{item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'}}"></image>
                </view>
                <!--右侧商品容器-->
                <view class="goods_info_wrap">
                    <view class="goods_name">{{item.goods_name}}</view>
                    <view class="goods_price">￥{{item.goods_price}}</view>
                </view>
            </navigator>
        </view>
    </view>
</Tabs>

pages\goods_list\index.less——>pages\collect\index.less

page{

}
.collect_main{
    background-color: #f3f4f6;
    .collect_title{
        padding: 30rpx 0;
        .collect_tips{
            padding: 15rpx;
            border:1rpx solid#ccc;
            margin-left: 25rpx;
            background-color: #fff;
        }
        /*激活选中的类*/
        .active{
            color: var(--themeColor);
            border-color: currentColor;
        }
    }    
    .collect_content{
        .goods_item{
            display: flex;  //伸缩盒子
            border-bottom:1rpx solid#ccc;
            background-color: #fff;
            .goods_img_wrap{
                flex: 2;
                display: flex;
                justify-content: center;
                align-items: center;
                image{
                    width: 70%;
                }
            }
            .goods_info_wrap{
                flex: 3;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .goods_name{
                    display: -webkit-box;
                    overflow: hidden;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp:2;
                }
                .goods_price{
                    color: var(--themeColor);
                    font-size: 32rpx;
                }
            }
        }
    }
}

商品页面点击链接——>提到到商品详情页面——>取消当前商品——>再返回_取消收藏的商品就不见了