第一步的话就是编写我们的wxml的代码:
<view class="cates">
<!-- 这个的话是我们引入了我们的自定义组件 -->
<SearchInput></SearchInput>
<!-- 在我们的这个位置的话就是设置我们的分类页面的内容部分 -->
<view class="cates_container">
<!-- 左侧的菜单 -->
<scroll-view class="left_menu" scroll-y="{{true}}">
<!-- 在我们的右侧的滚动菜单
2: 在我们的这个页面中要实现我们的
点击切换页面显示的效果:data-index="{{index}}"
在我们点击的时候还要传递一些参数过去现在
就是设置它等于我们当前的索引。
-->
<view
class="menu_item {{index===currentIndex?'active':''}}"
wx:for="{{leftMenuList}}"
wx:key="*this"
bindtap="handleItemTap"
data-index="{{index}}"
>
<!-- 在我们的这个位置的话就是让我们的数据得到渲染 -->
{{item}}
</view>
</scroll-view>
<!-- 右侧的商品内容 -->
<scroll-view class="right_content" scroll-y="{{true}}">
<!-- 给我们的右边的话就是填充我们的大的盒子 -->
<view
class="goods_group"
wx:for="{{rightContent}}"
wx:for-index="index1"
wx:for-item="item1"
>
<view class="goods_title">
<!-- 这个的话是我们的标题部分 {{item1.cat_name}}
在我们的这个位置的话就是设置我们的文本标签
并且设置相关的样式
-->
<text class="delimiter">/</text>
<text class="title">{{item1.cat_name}}</text>
<text class="delimiter">/</text>
</view>
<view class="goods_list">
<!--
这个的话是我们的容器部分
同时在我们的这个位置的话就是添加我们的
navigator标签,下面的index2和item2是我循环
当中的循环项。
-->
<navigator
wx:for="{{item1.children}}"
wx:for-index="index2"
wx:for-item="item2"
wx:key="cat_id"
>
<!--
在我们的超链接里面的话先放置的是我们的图片
然后的话我们的图片的下面的话放置的是我们的商品的
名称。
-->
<image src="{{item2.cat_icon}}" mode="widthFix" />
<!--
在我们的这个位置的话就是放置我们的相关的
商品的名称属性。同时的话给我们的图片添加
我们的渲染模式widthfix
-->
<view class="goods_name">
<!--
进行我们数据渲染
-->
{{item2.cat_name}}
</view>
</navigator>
</view>
</view>
</scroll-view>
</view>
</view>
第二步的话就是编写我们的wxss的代码:
Page {
height: 100%;
}
.cates {
height: 100%;
}
.cates .cates_container {
height: calc(100vh - 90rpx );
display: flex;
}
.cates .cates_container .left_menu {
flex: 2;
/*
在我们的这个位置的话就是设置我们的激活选中设置
也就是我们的active设置
*/
}
.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: red;
border-left: 5rpx solid currentColor;
}
.cates .cates_container .right_content {
flex: 5;
/*
这个的话就是我们的右侧的融器然后的话在我们的这个容器
中添加我们的页面的样式
*/
}
.cates .cates_container .right_content .goods_group .goods_title {
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
}
.cates .cates_container .right_content .goods_group .goods_title .delimiter {
color: #ccc;
padding: 0 10rpx;
}
.cates .cates_container .right_content .goods_group .goods_list {
display: flex;
flex-wrap: wrap;
}
.cates .cates_container .right_content .goods_group .goods_list navigator {
width: 33.33%;
text-align: center;
}
.cates .cates_container .right_content .goods_group .goods_list navigator image {
width: 50%;
}
在我们的这个位置的话就是设置添加我们的这个js部分的代码:
代码:
// pages/category/index.js
import { request } from "../../request/index.js";
Page({
/**
* 页面的初始数据
*/
// todo ------------->3
data:{
// 加载我们的左侧菜单的数据
leftMenuList:[],
// 加载我们右侧的商品数据
rightContent:[],
// 被点击的左侧的菜单事件在设置第二个页面的点击事件后使用
currentIndex:0
},
// todo -------------》4 接口的返回数据
Cates:[],
/**
* 生命周期函数--监听页面加载
*/
// todo --------------------->1
onLoad: function (options) {
// todo 在我们的这个位置调用我们的数据
this.getCates();
},
// 获取我们的分类数据 todo ------------->2
getCates(){
request({
// 在我们的这个位置的话就是添加我们的对象的url
url:'https://api-hmugo-web.itheima.net/api/public/v1/categories'
}).then(res =>{
// console.log(res);
// todo --------------> 5 给我们的返回值赋值
this.Cates = res.data.message;
// todo -------------> 6 构造左侧的大菜单数据
let leftMenuList = this.Cates.map(v=>v.cat_name);
// todo ----------> 8 构造我们右侧的商品数据
let rightContent = this.Cates[0].children;
// todo ------------>7 将我们的数据设置进去
this.setData({
leftMenuList,
rightContent
})
})
},
// 左侧菜单的点击事件
handleItemTap(e){
// todo ------> 给到我们的事件源是我们的e console.log(e);
/**
*1: 获取被点击的标题身上的索引
*2: 给我们的data中的datacurrentindex赋值
3: 根据不同的索引来渲染右侧的商品内容
*/
const {index} = e.currentTarget.dataset;
let rightContent = this.Cates[index].children;
this.setData({
currentIndex:index,
rightContent
})
}
})
然后的话就是我们的页面效果的展示我们点击时是可以切换的:
根据B站黑马程序员的视频课程编写