Luminous Prologue:
If loving you can make you happy, then I will love you; if loving you cannot make you happy, then I will only like you.
Text:
Recognize the Tao with the Tao
// 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
})
}
})Let ’s optimize the user experience
Each time you switch the menu, it is displayed from the top
// 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
})
}
})
