微信小程序Day2（上）

今天又开始学习了。
现在进行导航图标的设置。

在// pages/index/index.js
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    swiperData: [],  //存放轮播图数据
    catitemsData:[] //存放导航图标数据

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
    //调用函数，this指向最大的函数Page
    this.getSwiperData();
    this.getCatitems();
  },
  //获取轮播图数据的函数
  getSwiperData:function (){
   
   //发送网络请求
   wx.request({
   
     url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
     success : (res) =>{
   
       console.log("请求成功==》",res)
       //数据更新，响应式更新页面数据
       this.setData({
   
         swiperData:res.data.message
       })
       console.log(this.data.swiperData)
     },
     fail : (err) =>{
   
       console.log("请求失败==》",err)
     }

   })

  },
  //获取导航图标函数
  getCatitems(){
   
     //发送网络请求
   wx.request({
   
    url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
    success : (res) =>{
   
      console.log("请求成功==》",res)
      //数据更新，响应式更新页面数据
      this.setData({
   
        catitemsData:res.data.message
      })
      console.log(this.data.catitemsData)
    },
    fail : (err) =>{
   
      console.log("请求失败==》",err)
    }

  })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
   

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
   

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
   

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
   

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
   

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
   

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
   

  }
})这里插入代码片

然后我们就可以请求到导航图标的地址


然后开始对导航图标进行布局


然后对商品分类进行布局

获取数据

// pages/index/index.js
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    swiperData: [],  //存放轮播图数据
    catitemsData:[], //存放导航图标数据
    floorData:[] //存放商品分类数据

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
    //调用函数，this指向最大的函数Page
    this.getSwiperData();
    this.getCatitems();
    this.getFloorData();
  },
  //获取轮播图数据的函数
  getSwiperDat