【微信小程序】动态API+scroll-view组件实现页面滚动+点击左侧菜单右侧数据动态渲染

动态API+scroll-view组件实现页面滚动+点击左侧菜单右侧数据动态渲染

获取分类页面数据
接口：https://api-hmugo-web.itheima.net/api/public/v1/categories

pages/category/category.js

// 引入用来发送请求的方法
import {
    request } from "../../request/request.js";

Page({
   
  data: {
   
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: [],
    // 被点击的左侧菜单的索引
    currentIndex: 0，
    // 右侧内容的滚动条距离顶部的距离
    scrollTop: 0
  },
  
  // 接口的返回数据
  Cates: [],
  
  onLoad: function(options) {
   
    this.getCates();
  },
  
  // 获取分类页面数据
  getCates() {
   
    request({
   
      url: "https://api-hmugo-web.itheima.net/api/public/v1/categories"
    }).then(result => {
   
      this.Cates = result.data.message;
      // 构造左侧的菜单数据
      let leftMenuList = this.Cates.map(v => v.cat_name)
      // 构造右侧的商品数据
      let rightContent = this.Cates[0].children;
      this.setData({
   
        leftMenuList,
        rightContent
      })
    })
  },
  
  // 左侧菜单的点击事件
  handleItemTap(e) {
   
    // 1.获取被点击的菜单的索引
    const {
    index } = e.currentTarget.dataset
    // 3.根据不同的索引渲染右侧内容
    let rightContent = this.Cates[index].children;
    // 2.给data中的currentIndex赋值
    this.setData({
   
      currentIndex