商品收藏+历史浏览页面

共用一个页面

分析

• 顶部改为"商品收藏"
• 上方为导航栏:商品收藏、品牌收藏、店铺收藏、浏览足迹
• 下方为收藏的商品展示,并且通过点击商品可进商品详情页

代码实现

改变顶部导航内容"navigationBarTitleText": "收藏" 界面:

上方使用组件Table并传对应的属性值关于Table前面文章已经讲解了,在商品列表代码那

<tab tabList="{{tabList}}" curr="{{curr}}" GoodsList="{{GoodsList}}" bind:tapwhere="_where"></tab>
  

js

• tabList：选项卡的选项
• GoodsList:收藏的啥狗屁,在本地存储好了
• curr:选项卡选中的下标

函数:

• onLoad(options)页面加载执行,主要是接收选项卡传来的下标再调用onshow()
• onshow()页面显示时执行,主要是进行获取选项卡下标以及赋值对应的内容
• _where():选项卡点击事件,tab组件传来的

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

    /**
     * 页面的初始数据
     */
    data: {
        tabList:['商品收藏','品牌收藏','店铺收藏','浏览足迹'],
        curr:0,
        GoodsList:[]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log(options);
        this.onShow(options)
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function (option) {
        var goodslist=[];
        console.log(option.curr);
        //收藏
        if(option.curr==0){
            goodslist=wx.getStorageSync('shoucang') || [];
            this.setData({
                curr:0
            })
        }else if(option.curr==3){  //浏览足迹
            goodslist=wx.getStorageSync('hostry') || [];
            this.setData({
                curr:3
            })
        }
        this.setData({
            GoodsList:goodslist,
        })
    },
    /*导航栏点击事件,tab组件传来的 */
    _where(e){
        var goodslist=[];
        //收藏
        if(e.detail.index==0){
            goodslist=wx.getStorageSync('shoucang') || [];
        }else if(e.detail.index==3){  //浏览足迹
            goodslist=wx.getStorageSync('hostry') || [];
        }
        this.setData({
            GoodsList:goodslist,
            curr:e.detail.index
        })
    }
})

css用的是tab组件写好的,所以不需要再写了~

效果图展示

商品收藏：

历史浏览:

这样显示商品收藏以及浏览记录就完成了~