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

chnmagnus 發布于2019-08-23 18:39 / 1122人閱讀

摘要：上篇我們將菜單欄，商品展示結構完成，本次我們為這兩個部分接入數據。菜單欄接入數據導入組件，定義需要的數據格式導入滾動組件導入商品頁面準備需要的數據初始化組件。

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

菜單欄接入數據

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

通過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;
   }
 },

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

云服務器 GPU云服務器菜單欄懸浮菜單欄底部菜單欄恢復菜單欄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105622.html

webpack+vue項目實戰（二，開發管理系統主頁面）

摘要：運行一下，發現路由變了，當前項有標識了，子菜單的顯示與隱藏也有了原理也很簡單。 1.前言上篇文章(webpack+vue項目實戰（一,搭建運行環境和相關配置）)搭建了好了基本的一個項目目錄，安好好了一些要用到的依賴，以及把項目跑了起來。接下來，我們就進行第二步的操作，第二步就是做好一個開發系統的主頁面，這個頁面主要也就是一個側邊欄，通過側邊欄的各個選項來進行操作（切換各個組件）。比如...

Harpsichord1207 2019-08-20 17:43 評論0 收藏0
Vue實戰-商品展示切圖（7）

摘要：本篇我們將繼續推進外賣項目商品頁的展示。如圖所示，我們可以把商品也面分為兩大部分左側菜單欄右側商品展示為當前商品頁面的根元素。下一篇文章我們開始為左側菜單欄，右側商品展示加入數據。上次我們通過設計評價組件這個過程，了解到了組件設計中的良好的習慣，比如，文件夾如何支撐組件，圖片，組件路徑的存放于設置。本篇我們將繼續推進外賣項目—商品頁的展示。 showImg(https://segm...

DirtyMind 2019-08-23 18:15 評論0 收藏0
前方來報，八月最新資訊--關于vue2&3的最佳文章推薦

摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 評論0 收藏0
vue輕量級后臺管理系統基礎模板

摘要：具體實現請查看和的退出登陸回調方法。現在除了必要的頁面需要在一開始添加到路由表里，其他的頁面都可以根據后臺數據來自動生成。另外，如果在未登陸時要訪問某一指定頁面，會重定向到登陸頁，登陸成功后會自動跳到這個指定頁面。項目地址 vue-admin-template 在線預覽更新 2019.6.25 更新修復路由表沖突問題退出當前用戶，換賬號重新登陸時，上個賬號和現在的賬號路由表會有...

2shou 2019-08-23 14:17 評論0 收藏0
webpack+vue項目實戰（三，配置功能操作頁和組件的按需加載）

摘要：但是實際上，回款管理和開票管理的組件文件也是加載了。所以下面引用按需加載來處理。是不是小很多了，然后和是按需加載的，就是需要的時候才加載。 1.前言上篇文章（webpack+vue項目實戰（二，開發管理系統主頁面）），實現了，側邊欄的一個操作，點擊側邊欄的一些操作，最重要的就是路由的切換。看了上一篇的伙伴也不難發現，除了點擊側邊欄‘首頁’之外，點擊其它的都是白色的一片。原因我想大家都...

endless_road 2019-08-20 17:46 評論0 收藏0