微信小程序商城项目实战(第二篇:分类页)

实现分类页

修改json文件并且引入搜索框

{
  "usingComponents": {
    "search-input":"../../components/SearchInput/SearchInput"
  },
  "navigationBarTitleText": "分类"
}

界面编写

主要用到了scroll-view

<view class="cates">
<!-- 首页搜索框 -->
<search-input></search-input>
<view class="cates_container">
<!-- 左侧 -->
<scroll-view scroll-y class="left_menu">
    <view class="menu_item {{index == curr ? 'active':''}}" wx:for="{{leftcategoryList}}" wx:key="*this" bindtap="getgoods" data-index="{{index}}">
        {{item}}
    </view>
</scroll-view>
<!-- 右侧 -->
<scroll-view scroll-y  class="right_menu">
    <view class="goods_group" wx:for="{{rightcategoryList}}" wx:for-item="goods" wx:for-index="i" wx:key="cat_id">
        <view class="goods_title">🥂{{goods.cat_name}}🥂</view>
        <view class="goods_list">
            <navigator url="/pages/goods_list/goods_list?cid={{item.cat_id}}"  wx:for="{{goods.children}}" wx:key="cat_id">
                <image src="{{item.cat_icon}}" mode="widthFix"/>
                <view class="goods_name">{{item.cat_name}}</view>
            </navigator>
        </view>
    </view>
</scroll-view>
</view>
</view>

样式

page{height: 100%;}
.cates{height: 100%;}
.cates .cates_container{
  display: flex;
  height: 90%;/*100vh代表100%减去上方的高度90rpx(标准应该使用100vh-90rpx)*/
}
.cates .cates_container .left_menu{
  flex: 2;
}
.cates .cates_container .left_menu .menu_item{
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
}
.cates .cates_container .left_menu  .active{
  color: var(--themeColor);
  border-left: 5px solid var(--themeColor);
}
.cates .cates_container .right_menu{
  flex: 5;
}
.cates .cates_container .right_menu .goods_group .goods_title{
  display: flex;
  justify-content: center;
  color: #303133;
  background-color: #EBEEF5;
  font-size: 40rpx;
}
.cates .cates_container .right_menu .goods_group .goods_list{
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.cates .cates_container .right_menu .goods_group .goods_list navigator{
    width: 33.33%; 
}
.cates .cates_container .right_menu .goods_group .goods_list navigator image{
  width: 70%
}

JS方法编写

import {request} from '../../utils/request'
Page({

    /**
     * 页面的初始数据
     */
    data: {
        leftcategoryList:[],
        rightcategoryList:[],
        //当前被选中
        curr:0
    },
    //接口返回的数据
    cates:[],
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        //本地存储找数据
        const categorys=wx.getStorageSync('categories');
        if(!categorys){//本地无数据...
            this.getCategory();
        }else{
            //本地有数据
            if(Date.now()-categorys.time > 1000*60*30){
                this.getCategory();//过期再次发送请求
            }else{
                this.cates=categorys.data;
                //拆开数据
                let leftList=this.cates.map(v=>v.cat_name);
                let rightList=this.cates[0].children;//默认显示大家电的商品
                this.setData({
                    leftcategoryList:leftList,
                    rightcategoryList:rightList
                })
            }
        }
    },
    async getCategory(){
       let ret=await request('categories',null);
        // console.log(ret);
        this.cates=ret.data.message;
        //把数据存入本地
        wx.setStorageSync('categorys', {time:Date.now(),data:this.cates})
        //拆开数据
        let leftList=this.cates.map(v=>v.cat_name);
        let rightList=this.cates[0].children;//默认显示大家电的商品
        this.setData({
            leftcategoryList:leftList,
            rightcategoryList:rightList
        })
    },
    getgoods(e){
        let rightList=this.cates[e.target.dataset.index].children;
        this.setData({
            curr:e.target.dataset.index,
            rightcategoryList:rightList
        })
    }
})

效果图

成功实现~