分类导航：
1.小技巧：添加编译模式：
每次启动的时候都是想要看的页面，那么可以这样子选:
1.点击普通编译->添加编译模式：
2.这样以后项目一打开就是分类页面了，比较方便。
2.点击
1.先定义一个新的接收所有数据的变量，然后右侧内容单独存放在一个数组中，当点击左侧不同的选项就显示数组里面对应的不同内容。
2.页面布局：使用伸缩盒子：
界面：
<view class="cates"> <SearchInput></SearchInput> <view class="cates_container"> <!-- 左侧菜单： --> <scroll-view scroll-y class="left_menu"></scroll-view> <!-- 右侧菜单： --> <scroll-view scroll-y class="right_content"></scroll-view> </view> </view>
wxss:
page{
height: 100%;
}
.cates{
height: 100%;
.cates_container{
// 减去搜索框的高度：
height: ~‘calc(100vh 90rpx)‘;
display: flex;
.left_menu{
flex: 2;
}
.right_content{
flex: 5;
}
}
}
3.条件判断进行class渲染：
在wxss样式中设置某个样式 .active 后，要在页面根据条件判断是否需要加载：
在js中：
/** * 页面的初始数据 */ data: { // 被点击的左侧的菜单; currentIndex:0 },
4.页面缓存
在打开页面的时候看是否有缓存，没有的话便发送请求。如果有旧的数据且旧的数据没有过期就可以使用这些旧数据。
//本地存储的数据格式：{time:Date.now(),data:[...]} //1.获取本地存储中的数据：key=ccates const Cates = wx.getStorageSync(‘cates‘); //2.判断本地是否有有效的旧数据： if(!Cates){ //不存在，发送请求，并将数据写入到本地缓存中： this.getCates(); }else{ //3.存在且有效从本地缓存里面拿出数据： //过期时间： this.Cates = Cates.data; //构造左侧的大菜单数据： let leftMenuList = this.Cates.map(v => v.cat_name); //构造右侧的商品数据： let rightContent = this.Cates[0].children; this.setData({ leftMenuList, rightContent })
原文：https://www.cnblogs.com/lyjblogg/p/12147185.html