成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

chnmagnus / 1187人閱讀

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

上篇我們將菜單欄，商品展示結(jié)構(gòu)完成，本次我們?yōu)檫@兩個部分接入數(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)用滾動的初始化方法
          // that.initScroll();
          // 開始時，DOM元素沒有渲染，即高度是問題
          // 在獲取到數(shù)據(jù)后，并DOM已經(jīng)被渲染，表示列表高度是沒問題的
          // nextTick
          that.$nextTick(() => {
            // DOM已經(jīng)更新
            that.initScroll();

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



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


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


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



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


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


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




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


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
  });

  // 添加滾動監(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 第一個區(qū)間(專場)
  // 217~1342 第二個區(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)，滾動到相對應(yīng)的元素
  let el = foodlist[index];
  // 滾動到對應(yīng)元素的位置
  this.foodScroll.scrollToElement(el, 250);
}


},





computed定義屬性




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


computed: {


currentIndex() {
  // 根據(jù)右側(cè)滾動位置，確定對應(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://m.hztianpu.com/yun/105622.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    webpack+vue項目實戰(zhàn)（二，開發(fā)管理系統(tǒng)主頁面）
    
                                                     
    摘要：運行一下，發(fā)現(xiàn)路由變了，當(dāng)前項有標(biāo)識了，子菜單的顯示與隱藏也有了原理也很簡單。

1.前言
上篇文章(webpack+vue項目實戰(zhàn)（一,搭建運行環(huán)境和相關(guān)配置）)搭建了好了基本的一個項目目錄，安好好了一些要用到的依賴，以及把項目跑了起來。接下來，我們就進(jìn)行第二步的操作，第二步就是做好一個開發(fā)系統(tǒng)的主頁面，這個頁面主要也就是一個側(cè)邊欄，通過側(cè)邊欄的各個選項來進(jìn)行操作（切換各個組件）。比如...
    
                                                   
                          
    
                                
    
                                    Harpsichord1207
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    Vue實戰(zhàn)-商品展示切圖（7）
    
                                                     
    摘要：本篇我們將繼續(xù)推進(jìn)外賣項目商品頁的展示。如圖所示，我們可以把商品也面分為兩大部分左側(cè)菜單欄右側(cè)商品展示為當(dāng)前商品頁面的根元素。下一篇文章我們開始為左側(cè)菜單欄，右側(cè)商品展示加入數(shù)據(jù)。

上次我們通過設(shè)計評價組件這個過程，了解到了組件設(shè)計中的良好的習(xí)慣，比如，文件夾如何支撐組件，圖片，組件路徑的存放于設(shè)置。
本篇我們將繼續(xù)推進(jìn)外賣項目—商品頁的展示。
showImg(https://segm...
    
                                                   
                          
    
                                
    
                                    DirtyMind
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前方來報，八月最新資訊--關(guān)于vue2&3的最佳文章推薦
    
                                                     
    摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認(rèn)命是哪吒的命。

showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378);
出處
查看github最新的Vue...
    
                                                   
                          
    
                                
    
                                    izhuhaodev
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    vue輕量級后臺管理系統(tǒng)基礎(chǔ)模板
    
                                                     
    摘要：具體實現(xiàn)請查看和的退出登陸回調(diào)方法?，F(xiàn)在除了必要的頁面需要在一開始添加到路由表里，其他的頁面都可以根據(jù)后臺數(shù)據(jù)來自動生成。另外，如果在未登陸時要訪問某一指定頁面，會重定向到登陸頁，登陸成功后會自動跳到這個指定頁面。

項目地址
vue-admin-template
在線預(yù)覽
更新
2019.6.25 更新
修復(fù)路由表沖突問題
退出當(dāng)前用戶，換賬號重新登陸時，上個賬號和現(xiàn)在的賬號路由表會有...
    
                                                   
                          
    
                                
    
                                    2shou
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    webpack+vue項目實戰(zhàn)（三，配置功能操作頁和組件的按需加載）
    
                                                     
    摘要：但是實際上，回款管理和開票管理的組件文件也是加載了。所以下面引用按需加載來處理。是不是小很多了，然后和是按需加載的，就是需要的時候才加載。

1.前言
上篇文章（webpack+vue項目實戰(zhàn)（二，開發(fā)管理系統(tǒng)主頁面）），實現(xiàn)了，側(cè)邊欄的一個操作，點擊側(cè)邊欄的一些操作，最重要的就是路由的切換。看了上一篇的伙伴也不難發(fā)現(xiàn)，除了點擊側(cè)邊欄‘首頁’之外，點擊其它的都是白色的一片。原因我想大家都...
    
                                                   
                          
    
                                
    
                                    endless_road
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<