Vue實戰-菜單欄，商品展示數據交互（8）

上篇我們將菜單欄，商品展示結構完成，本次我們爲這兩個部分接入數據。

菜單欄接入數據

導入組件，定義需要的數據格式

<script>
// 導入BScroll 滾動組件
import BScroll from "better-scroll";
// 導入Food 商品頁面
import Food from "components/Food/Food";

export default {
  data() { //準備需要的數據,初始化組件。
    return {
      container: {},
      goods: [],
      poiInfo: {},
      listHeight: [],
      scrollY: 0,
      menuScroll: {},
      foodScroll: {},
      selectedFood: {}
    };
  },
    //引用組件
  components: {
    BScroll,
    Food
  }
};
</script>

通過created鉤子發起請求獲取數據

之前我們說過在created鉤子，mounted鉤子內可以發起請求，請求需要的數據。本次我們在created鉤子內發起get請求，獲取數據

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

    // 通過axios發起get請求
    this.$axios
      .get("/api/goods")
      .then(function(response) {
        // 獲取到數據
        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;

          // 調用滾動的初始化方法
          // that.initScroll();
          // 開始時，DOM元素沒有渲染，即高度是問題
          // 在獲取到數據後，並DOM已經被渲染，表示列表高度是沒問題的
          // nextTick
          that.$nextTick(() => {
            // DOM已經更新
            that.initScroll();

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

注意$nextTick()用法，在dom更新後。我們執行初始化滾動函數。

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

通過methods定義我們需要的方法

• 通過head_bg(imgName)方法獲取到商品的背景圖片；
• 方法initScroll()用來初始化滾動，https://cn.vuejs.org/v2/api/#ref;
• calculateHeight()方法獲取左側每一個菜單欄目的元素；

• 使用selectMenu()方法，在我們點擊菜單後，右側顯示對應的商品信息；

  methods: {

  head_bg(imgName) {
    return "background-image: url(" + imgName + ");";
  },
  // 滾動的初始化
  initScroll() {
    // ref屬性就是用來綁定某個dom元素或某個組件，然後在this.$refs裏面
    this.menuScroll = new BScroll(this.$refs.menuScroll, {
      click: true
    });
    this.foodScroll = new BScroll(this.$refs.foodScroll, {
      probeType: 3,
      click: true
    });
  
    // 添加滾動監聽事件
    this.foodScroll.on("scroll", pos => {
      this.scrollY = Math.abs(Math.round(pos.y));
    });
  },
  calculateHeight() {
    // 通過$refs獲取到對應的元素
    let foodlist = this.$refs.foodScroll.getElementsByClassName(
      "food-list-hook"
    );
  
    // 添加到數組區間
    // 0~216 第一個區間(專場)
    // 217~1342 第二個區間(熱銷)
    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"
    );
  
    // 根據下標，滾動到相對應的元素
    let el = foodlist[index];
    // 滾動到對應元素的位置
    this.foodScroll.scrollToElement(el, 250);
  }

  },

computed定義屬性

• currentIndex屬性綁定在左側菜單欄，使菜單元素與右側內容作爲對應，展示給用戶。

  computed: {

  currentIndex() {
    // 根據右側滾動位置，確定對應的索引下標
    for (let i = 0; i < this.listHeight.length; i++) {
      // 獲取商品區間的範圍
      let height1 = this.listHeight[i];
      let height2 = this.listHeight[i + 1];
  
      // 是否在上述區間中
      if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
        return i;
      }
    }
  
    return 0;
     }
   },
  

以上我們完成了商品頁面數據的交互，下一篇我們將加入商品控件，與購物車。