成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

chnmagnus / 1156人閱讀

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

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

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

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

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

之前我們說過在created鉤子，mounted鉤子內(nèi)可以發(fā)起請求，請求需要的數(shù)據(jù)。本次我們在created鉤子內(nèi)發(fā)起get請求，獲取數(shù)據(jù)

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

    // 通過axios發(fā)起get請求
    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元素沒有渲染，即高度是問題
          // 在獲取到數(shù)據(jù)后，并DOM已經(jīng)被渲染，表示列表高度是沒問題的
          // 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/#...

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

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

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

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

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

methods: {

head_bg(imgName) {
  return "background-image: url(" + imgName + ");";
},
// 滾動(dòng)的初始化
initScroll() {
  // ref屬性就是用來綁定某個(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)聽事件
  this.foodScroll.on("scroll", pos => {
    this.scrollY = Math.abs(Math.round(pos.y));
  });
},
calculateHeight() {
  // 通過$refs獲取到對應(yīng)的元素
  let foodlist = this.$refs.foodScroll.getElementsByClassName(
    "food-list-hook"
  );

  // 添加到數(shù)組區(qū)間
  // 0~216 第一個(gè)區(qū)間(專場)
  // 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)到相對應(yīng)的元素
  let el = foodlist[index];
  // 滾動(dòng)到對應(yīng)元素的位置
  this.foodScroll.scrollToElement(el, 250);
}

},

computed定義屬性

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

computed: {

currentIndex() {
  // 根據(jù)右側(cè)滾動(dòng)位置，確定對應(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;
   }
 },

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105622.html

相關(guān)文章

  • webpack+vue項(xiàng)目實(shí)戰(zhàn)（二，開發(fā)管理系統(tǒng)主頁面）

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

    Harpsichord1207 評論0 收藏0

  • Vue實(shí)戰(zhàn)-商品展示切圖（7）

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

    DirtyMind 評論0 收藏0

  • 前方來報(bào)，八月最新資訊--關(guān)于vue2&3的最佳文章推薦

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

    izhuhaodev 評論0 收藏0

  • vue輕量級后臺管理系統(tǒng)基礎(chǔ)模板

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

    2shou 評論0 收藏0

  • webpack+vue項(xiàng)目實(shí)戰(zhàn)（三，配置功能操作頁和組件的按需加載）

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

    endless_road 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<