Vue實(shí)戰(zhàn)-菜單欄，商品展示數(shù)據(jù)交互（8）

chnmagnus 發(fā)布于2019-08-23 18:39 / 1130人閱讀

摘要：上篇我們將菜單欄，商品展示結(jié)構(gòu)完成，本次我們?yōu)檫@兩個(gè)部分接入數(shù)據(jù)。菜單欄接入數(shù)據(jù)導(dǎo)入組件，定義需要的數(shù)據(jù)格式導(dǎo)入滾動(dòng)組件導(dǎo)入商品頁(yè)面準(zhǔn)備需要的數(shù)據(jù)初始化組件。

上篇我們將菜單欄，商品展示結(jié)構(gòu)完成，本次我們?yōu)檫@兩個(gè)部分接入數(shù)據(jù)。

菜單欄接入數(shù)據(jù)

導(dǎo)入組件，定義需要的數(shù)據(jù)格式

通過(guò)created鉤子發(fā)起請(qǐng)求獲取數(shù)據(jù)

之前我們說(shuō)過(guò)在created鉤子，mounted鉤子內(nèi)可以發(fā)起請(qǐng)求，請(qǐng)求需要的數(shù)據(jù)。本次我們?cè)赾reated鉤子內(nèi)發(fā)起get請(qǐng)求，獲取數(shù)據(jù)

  created() {
    //通過(guò)that改變.then中的this指向
    var that = this;

    // 通過(guò)axios發(fā)起get請(qǐng)求
    this.$axios
      .get("/api/goods")
      .then(function(response) {
        // 獲取到數(shù)據(jù)
        var dataSource = response.data;
        if (dataSource.code == 0) {
          that.container = dataSource.data.container_operation_source;
          that.goods = dataSource.data.food_spu_tags;
          that.poiInfo = dataSource.data.poi_info;

          // 調(diào)用滾動(dòng)的初始化方法
          // that.initScroll();
          // 開始時(shí)，DOM元素沒(méi)有渲染，即高度是問(wèn)題
          // 在獲取到數(shù)據(jù)后，并DOM已經(jīng)被渲染，表示列表高度是沒(méi)問(wèn)題的
          // nextTick
          that.$nextTick(() => {
            // DOM已經(jīng)更新
            that.initScroll();

            // 計(jì)算分類區(qū)間高度
            that.calculateHeight();
          });
        }
      })
      .catch(function(error) {
        // 出錯(cuò)處理
        console.log(error);
      });
  },

注意$nextTick()用法，在dom更新后。我們執(zhí)行初始化滾動(dòng)函數(shù)。

https://cn.vuejs.org/v2/api/#...

通過(guò)methods定義我們需要的方法

通過(guò)head_bg(imgName)方法獲取到商品的背景圖片；

方法initScroll()用來(lái)初始化滾動(dòng)，https://cn.vuejs.org/v2/api/#ref;

calculateHeight()方法獲取左側(cè)每一個(gè)菜單欄目的元素；

使用selectMenu()方法，在我們點(diǎn)擊菜單后，右側(cè)顯示對(duì)應(yīng)的商品信息；

methods: {

head_bg(imgName) {
  return "background-image: url(" + imgName + ");";
},
// 滾動(dòng)的初始化
initScroll() {
  // ref屬性就是用來(lái)綁定某個(gè)dom元素或某個(gè)組件，然后在this.$refs里面
  this.menuScroll = new BScroll(this.$refs.menuScroll, {
    click: true
  });
  this.foodScroll = new BScroll(this.$refs.foodScroll, {
    probeType: 3,
    click: true
  });

  // 添加滾動(dòng)監(jiān)聽(tīng)事件
  this.foodScroll.on("scroll", pos => {
    this.scrollY = Math.abs(Math.round(pos.y));
  });
},
calculateHeight() {
  // 通過(guò)$refs獲取到對(duì)應(yīng)的元素
  let foodlist = this.$refs.foodScroll.getElementsByClassName(
    "food-list-hook"
  );

  // 添加到數(shù)組區(qū)間
  // 0~216 第一個(gè)區(qū)間(專場(chǎng))
  // 217~1342 第二個(gè)區(qū)間(熱銷)
  let height = 0;
  this.listHeight.push(height);
  for (let i = 0; i < foodlist.length; i++) {
    let item = foodlist[i];

    // 累加
    height += item.clientHeight;

    this.listHeight.push(height);
  }
},
selectMenu(index) {

  let foodlist = this.$refs.foodScroll.getElementsByClassName(
    "food-list-hook"
  );

  // 根據(jù)下標(biāo)，滾動(dòng)到相對(duì)應(yīng)的元素
  let el = foodlist[index];
  // 滾動(dòng)到對(duì)應(yīng)元素的位置
  this.foodScroll.scrollToElement(el, 250);
}

computed定義屬性

currentIndex屬性綁定在左側(cè)菜單欄，使菜單元素與右側(cè)內(nèi)容作為對(duì)應(yīng)，展示給用戶。

computed: {

currentIndex() {
  // 根據(jù)右側(cè)滾動(dòng)位置，確定對(duì)應(yīng)的索引下標(biāo)
  for (let i = 0; i < this.listHeight.length; i++) {
    // 獲取商品區(qū)間的范圍
    let height1 = this.listHeight[i];
    let height2 = this.listHeight[i + 1];

    // 是否在上述區(qū)間中
    if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
      return i;
    }
  }

  return 0;
   }
 },

以上我們完成了商品頁(yè)面數(shù)據(jù)的交互，下一篇我們將加入商品控件，與購(gòu)物車。