微信小程序--收藏页面

微信小程序–收藏页面

包含功能点：

• 商品收藏页面展示

结构：collect.wxml

<tabs tabList="{{tabList}}" binditemChange="handleItemChange">
  <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/goods_detail?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.less

page {}

.collect_main {
  background-color: #f3f4f6;

  .collect_title {
    padding: 40rpx 0;

    .collect_tips {
      padding: 15rpx;
      border: 1px solid #ccc;
      margin-left: 25rpx;
      background-color: #fff;
    }

    .active {
      color: var(--themeColor);
      border-color: currentColor;
    }

    .collect_tips {}
  }

  .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;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .goods_price {
          color: var(--themeColor);
          font-size: 32rpx;
        }
      }
    }
  }
}

逻辑：collect.js文件

// pages/collect/collect.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 收藏数据
    collect: [],
    tabList: [
      {
        id: 0,
        name: "商品收藏",
        isActive: true,
      },
      {
        id: 1,
        name: "品牌收藏",
        isActive: false,
      },
      {
        id: 2,
        name: "店铺收藏",
        isActive: false,
      },
      {
        id: 3,
        name: "浏览足迹",
        isActive: false,
      }
    ]
  },
  onShow(){
    const collect = wx.getStorageSync("collect")||[];
    this.setData({
      collect
    })
  },
  handleItemChange(e){
    const {index} = e.detail;
     /**
       * 严谨做法：重新拷贝一份数组，再对这个数组的备份进行处理
       * let tabList = JSON.parse(JSON.stringify(this.data.tabList));
       * 一般做法：let {tabList} = this.data;
       */
      let tabList = JSON.parse(JSON.stringify(this.data.tabList));
      tabList.forEach((v, i) => {
        i === index ? v.isActive = true : v.isActive = false;
      })
      this.setData({
        tabList
      })
  }
 
})

页面配置文件：collect.json文件

{
  "usingComponents": {
    "tabs": "../../component/tabs/tabs"
  },
  "navigationBarTitleText": "商品收藏"
}