微信小程序开发实战第二个页面的编写

第一步的话就是编写我们的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站黑马程序员的视频课程编写