GululuQ-mp/pages/index/index.js

// index.js
const { API } = require('../../service/api.js');

const App = getApp();


Page({
  data: {
    bannerList: [],
    ipInfoList: [],
    prodClassList: [],
    showAddCartModal: false,
    currentProduct: null,

    isBrandMini: false,
    isCategoryMini: false
  },
  // 显示商品属性模态框
  showAddCartModal(e) {
    const product = e.detail;
    this.setData({
      showAddCartModal: true,
      currentProduct:product
    });
  },
  // 关闭商品属性模态框
  handleCloseAddCartModal() {
    this.setData({ showAddCartModal: false });
  },

  // 进入今日热门页
  hotBut: function(){
    wx.navigateTo({
      url: '../Mall/hotCommodity/hotCommodity',
    })
  },
  // 进入新品上市页
  newBut: function(){
    wx.navigateTo({
      url: '../Mall/newCommodity/newCommodity',
    })
  },
  // 进入预售页
  presaleBut: function(){
    wx.navigateTo({
      url: '../Mall/presaleCommodity/presaleCommodity',
    })
  },

  onLoad: async function (options) {

    // 生命周期函数--监听页面加载
    console.log("onLoad");
    console.log('App.globalData', App.globalData);

    const resBanner = await API.getBanners({});
    console.log('resBanner', resBanner);
    this.setData({
      bannerList : resBanner.bannerList
    });

    const resBrand = await API.getIpInfos({});
    console.log('resBrand', resBrand);
    this.setData({
      ipInfoList : resBrand.ipInfoList
    });
    const resCategory = await API.getProdClasses({});
    console.log('resCategory', resCategory);
    this.setData({
      prodClassList : resCategory.prodClassList
    });
    // this.setData({
    //     prodClassList: [
    //       { classUrl: 'someprod.jpg', title: '火影忍者' },
    //       { classUrl: 'someprod.jpg', title: '初音' },
    //       { classUrl: 'someprod.jpg', title: '原神' },
    //       { classUrl: 'someprod.jpg', title: '柯南' },
    //       { classUrl: 'someprod.jpg', title: '非人哉' },
    //       { classUrl: 'someprod.jpg', title: '全部' },
    //     ]
    //   });
  },

  onPageScroll: function(e) {
    wx.createSelectorQuery()
      .select('.container')
      .boundingClientRect((rect) => {
        if (rect) {
          const shouldBarandBeMini = rect.top <= -480; // 在container上移到-480px时，品牌栏mini出现
          if (this.data.isBrandMini !== shouldBarandBeMini) {
            this.setData({
              isBrandMini: shouldBarandBeMini
            });
          }
          const shouldCategoryBeMini = rect.top <= -680; // 在container上移到-680px时，分类栏mini出现
          if (this.data.isCategoryMini !== shouldCategoryBeMini) {
            this.setData({
              isCategoryMini: shouldCategoryBeMini
            });
          }
        }
      })
      .exec();
  }
  
})