夜光帶你走進 微信小程序開發（三十八）擅長的領域

夜光序言：

 

我恨你，我最恨你的是，你讓我恨你也無法真的恨下去。

 

 

 

 
 
正文：
 
                                              以道御術 / 以術識道

 

 

 

 

 

// 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
    })
  }

})