微信小程序--收藏页面

太过爱你忘了你带给我的痛 2023-02-20 03:20 43阅读 0赞

## 微信小程序–收藏页面 ##

> 包含功能点：
> 
>  *  商品收藏页面展示

### 结构：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": "商品收藏"
    }