夜光带你走进 微信小程序开发（三十八）擅长的领域

夜光序言：

 

我恨你，我最恨你的是，你让我恨你也无法真的恨下去。

 

 

 

 
 
正文：
 
                                              以道御术 / 以术识道

 

 

 

 

 

// pages/category/category.js
//0 引入 用来发送请求的 方法 一定要把路径补全
import { request } from "../../request/index.js";


Page({

  /**
   * 页面的初始数据
   */
  data: {
      //左侧的菜单数据
      leftMenuList:[],
      //右侧的商品数据
      rightContent:[],
      //被点击的左侧菜单
      currentIndex:0
  },
  //接口的返回数据
  Cates:[],



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     this.getCates();
  },
  //获取分类的数据
  getCates(){
      request({
        url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
      })
      .then(res=>{
        // console.log(res)
        this.Cates = res.data.message;

        //构造左侧的大菜单数据
        let leftMenuList = this.Cates.map(
          v=>v.cat_name
        );
        //构造右侧的商品数据
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      })
  },
  //我们在此写一个点击事件
  //左侧菜单的点击事件
  handleItemTap(e){
    // console.log(e);
    const {index} = e.currentTarget.dataset;
    this.setData({
      currentIndex:index
    })
  }

})

// pages/category/category.js
//0 引入 用来发送请求的 方法 一定要把路径补全
import { request } from "../../request/index.js";


Page({

  /**
   * 页面的初始数据
   */
  data: {
      //左侧的菜单数据
      leftMenuList:[],
      //右侧的商品数据
      rightContent:[],
      //被点击的左侧菜单
      currentIndex:0
  },
  //接口的返回数据
  Cates:[],



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     this.getCates();
  },
  //获取分类的数据
  getCates(){
      request({
        url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
      })
      .then(res=>{
        // console.log(res)
        this.Cates = res.data.message;

        //构造左侧的大菜单数据
        let leftMenuList = this.Cates.map(
          v=>v.cat_name
        );
        //构造右侧的商品数据
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      })
  },
  //我们在此写一个点击事件
  //左侧菜单的点击事件
  handleItemTap(e){
    // console.log(e);
    const {index} = e.currentTarget.dataset;
    //构造右侧的商品数据
    let rightContent = this.Cates[index].children;
    this.setData({
      currentIndex: index,
      rightContent
    })
  }

})