4 |
您所在的位置：网站首页 › 网页内容分类 › 4 |
4
|
1. 效果
（1）为了方便演示，添加一个编译模式 （2）现在分类页面的index.js文件中创建三个空数组 index.js data: { // 左侧的菜单数据 leftMenuList: [], // 右侧的商品数据 rightContent: [] }, // 为了方便使用数据，在data同层级下创建Cates空数组接收接口返回的数据 Cates: [],（3）发送异步请求给三个空数组赋值 index.js // 引入用来发送请求的方法 一定要把路径补全 import {request} from "../../request/index.js" Page({ /** * 页面的初始数据 */ data: { // 左侧的菜单数据 leftMenuList: [], // 右侧的商品数据 rightContent: [] }, // 为了方便使用数据，在data同层级下创建Cates空数组接收接口返回的数据 Cates: [], /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getCates(); }, // 获取轮播图数据 getCates(){ request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories'}) .then(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 }) }) }, }) 5. 页面布局index.wxml |
【本文地址】
今日新闻 |
推荐新闻 |