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

夜光序言：

 

如果愛你可以讓你幸福,那我就愛你;如果愛你不能讓你幸福,那我就只喜歡你.

 

 

 

 

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

 

 

// pages/category/category.js
//0 引入 用來發送請求的 方法 一定要把路徑補全
import { request } from "../../request/index.js";


Page({

  /**
   * 頁面的初始數據
   */
  data: {
      //左側的菜單數據
      leftMenuList:[],
      //右側的商品數據
      rightContent:[],
      //被點擊的左側菜單
      currentIndex:0
  },
  //接口的返回數據
  Cates:[],



  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
     this.getCates();
    
    // 1. 獲取本地存儲的數據
    // 小程序中也是存在本地存儲這個技術的
    const Cates = wx.getStorageSync("cates");
    if (!Cates){
      //不存在的話，就是發送請求獲取數據
      this.getCates();
    }else{
      //有舊的數據 定義過期時間 10s改成5分鐘
      if(Date.now() - Cates.time > 1000*10){
        //重新發送請求
        this.getCates();
      }else{
        //否則 可以使用舊的數據
        console.log("可以使用舊的數據")
      }
    }

  },
  //獲取分類的數據
  getCates(){
      request({
        url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
      })
      .then(res=>{
        // console.log(res)
        this.Cates = res.data.message;

        //把接口的數據存入到本地存儲中
        wx.setStorageSync("cates", {time:Date.now(),date:this.Cates})   


        //構造左側的大菜單數據
        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
    })
  }

})

我們優化一下用戶體驗

每次切換菜單，都是從最上面的開始顯示

 

 

// pages/category/category.js
//0 引入 用來發送請求的 方法 一定要把路徑補全
import { request } from "../../request/index.js";


Page({

  /**
   * 頁面的初始數據
   */
  data: {
      //左側的菜單數據
      leftMenuList:[],
      //右側的商品數據
      rightContent:[],
      //被點擊的左側菜單
      currentIndex:0,
      //右側內容的滾動條 距離頂部的距離
      scrollTop:0
  },
  //接口的返回數據
  Cates:[],



  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
     this.getCates();
    
    // 1. 獲取本地存儲的數據
    // 小程序中也是存在本地存儲這個技術的
    const Cates = wx.getStorageSync("cates");
    if (!Cates){
      //不存在的話，就是發送請求獲取數據
      this.getCates();
    }else{
      //有舊的數據 定義過期時間 10s改成5分鐘
      if(Date.now() - Cates.time > 1000*10){
        //重新發送請求
        this.getCates();
      }else{
        //否則 可以使用舊的數據
        console.log("可以使用舊的數據")
        //構造左側的大菜單數據
        let leftMenuList = this.Cates.map(
          v => v.cat_name
        );
        //構造右側的商品數據
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      }
    }

  },
  //獲取分類的數據
  getCates(){
      request({
        url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
      })
      .then(res=>{
        // console.log(res)
        this.Cates = res.data.message;

        //把接口的數據存入到本地存儲中
        wx.setStorageSync("cates", {time:Date.now(),date:this.Cates})   


        //構造左側的大菜單數據
        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,
      //重新設置右側到頂部的距離
      scrollTop: 0 

    })
  }

})