11 | 小程序实战之商品收藏页面

这块没什么好说的，可以套用之前的模板

<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">
      <navigator
       class="goods_item"
       wx:for="{{collect}}"
       wx:key="goods_id"
       url="/pages/goods_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>

.collect_main{
  background-color: #f3f4f6;
  .collect_title{
    padding: 40rpx 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: 1px 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;
        }
      }
    }
  }
}

// pages/collect/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs: [
      {
        id: 0,
        value: "商品收藏",
        isActive: true,
      },
      {
        id: 1,
        value: "品牌收藏",
        isActive: false,
      },
      {
        id: 2,
        value: "店铺收藏",
        isActive: false,
      },
      {
        id: 3,
        value: "浏览足迹",
        isActive: false,
      }
    ]
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow(){
    const collect=wx.getStorageSync("collect")||[];
    this.setData({
      collect
    });
  },
  // 标题点击事件 从子组件传递过来
  handleTabsItemChange(e){
    // 1 获取被点击的标题索引
    const {index}=e.detail;
    // 2 修改源数组
    let {tabs}=this.data;
    tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
    // 3 赋值到data中
    this.setData({
      tabs
    })
  },
});

{
  "usingComponents": {
    "Tabs":"/components/Tabs/Tabs"
  },
  "navigationBarTitleText": "商品收藏"
}