vue實現小米官網

本文轉載自查看原文 2021-05-17 17:34 1837 Web開發

Vue實現小米官網

作為一名米粉，前段子突然想到我們能不能用Vue實現小米官網。好，有了想法，說干就干！在花了一個星期左右的時間，終於完工了。剛開始設計整體的時候，用的時間比較少，但是后面不停地摳細節，耗費了將近3天的時間。

自己在查看了小米官網的布局以后，對於小米官網我們可以分為這幾個部分進行設計。

中間的一整塊商品區域，我們也單獨的作為一部分。

最后的頁面，分為三個部分

接下來，我們說明一下每個部分的實現。

我們在設計第一部分的時候，使用浮動的方式。左邊左浮，右邊右浮，因此在浮動的過程中，我們應當把購物側的結構放在登錄和注冊欄的前面，這樣才能達到我們想要的效果。

另外，就是一些簡單的邏輯功能了，當我們把鼠標放到"下載app"，二維碼顯示，離開則消失。購物車也是如此做法。當然，我們還要加一個過渡效果，否則顯示和隱藏會很快，體驗很不好！

第二部分：TopHeader

第二部分，我們又分為兩個區域。第一個區域就是頭部，第二個區域就是左側商品欄。我們把左側商品欄設計為一個單獨的子組件，在頭部使用li列表的時候，我們的第一個li放入的就是這個單獨的子組件。

子組件中，鼠標放到相應的類型產品時，會顯示對應的詳細商品，顯示出來的盒子采用絕對定位。由於需要的數據太多，獲取太麻煩，我們只復制粘貼了幾個商品的數據。

當我們把鼠標放到頭部區域的時候，顯示相應的產品，顯示出來的盒子同樣采用絕對定位。"服務"、"社區"這兩個地方不顯示產品。

點擊搜索框，會出現相應的搜索詞，點擊別處，搜索詞消失。但是呢？這里有個小bug，功能還未完善，后面我們會講。

這一部分就是輪播圖區域。

這里，我們把輪播圖封裝起來，需要的時候我們再把輪播圖組件引入到Banner組件中。

這設計輪播圖組件時，我們設計了三種輪播圖組件。這三種輪播圖組件只要傳遞相應的信息，即可使用，無須修改。

第一種輪播圖

這個輪播圖實現的功能是最完善的，具有左右按鈕功能、下方小點功能（配備相應顏色變化）、定時器功能、定時器暫時和開啟功能等等。

它的主要實現是依靠原生js的動畫函數實現，我們把輪播圖區域設計為一個ul，運動的實際就是平移ul，因此達到輪播功能。具體實現可以查看源碼，這里不便陳述。

但是呢，這里還有一個小小的bug。原先我使用js寫這個輪播圖的時候是沒有的，現在把這個輪播圖通過vue實現就產生了，因為時間原因，懶得去修改了，后面有時間再去搞一下。這個bug后面會講。

// 動畫函數
    animate(obj,target,callback){
      clearInterval(obj.timer);
      obj.timer = setInterval(function (){
      var step = (target - obj.offsetLeft)/10;
      step = step >0?Math.ceil(step):Math.floor(step);
      if (obj.offsetLeft === target){
          clearInterval(obj.timer)
          callback && callback();
      }
      obj.style.left = obj.offsetLeft +step +"px";
      },15);
    },

第二種輪播圖

第二種輪播圖目前僅僅只有左右播放功能，它的設計思想和邏輯都很簡單，就是直接切換數據內的數據，和第一種輪播圖的設計思想和結構完全不同。

第三種輪播圖

第三種輪播圖使用的技術最簡單，僅僅是HTML+CSS。它沒有左右按鈕功能，只有小圓點跳轉輪播功能，但相比第二種輪播圖，它有一個動畫過渡的過程，體驗更好。

相比較與第一種輪播圖，其設計思想也是依靠平移。但它的平移對象是某一張圖，指定某一幅圖平移，那么另外其他圖也會跟着平移。

平移核心CSS代碼

#r0:checked ~ .s1{
  margin-left: 0;
}
#r1:checked ~ .s1{
  margin-left: -20%;
}
#r2:checked ~ .s1{
  margin-left: -40%;
}
#r3:checked ~ .s1{
  margin-left: -60%;
}
#r4:checked ~ .s1{
  margin-left: -80%;
}

第四部分：TopSub

第四部分的設計和小米官網一樣，通過浮動左右兩個盒子實現

第五部分：ToolBar

在設置工具欄的時候，我們采用的是fixed定位。

當下拉到一定距離，我們讓“回到頂部”顯示出來，否則隱藏起來。在這里，我們在鈎子函數中需要對“scroll”進行監聽。

  // 對scroll進行監聽
  mounted () {
    window.addEventListener('scroll', this.scrollToTop)
    // 這里的對象是vue實例
    // console.log(this);   
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },

第六部分：Goods

第六部分是最主要和最大的一部分，其實主要也是分為兩個部分，第一個部分是小米秒殺部分，其余的就是詳細商品部分。這里需要的數據同樣也是很多，都是CV大法那些事了，我就沒有統統都獲取過來了。

小米秒殺

小米秒殺區域，我們也是設計兩個盒子，采用浮動設計，我們把左邊的倒計時盒子設計為一個子組件。

秒殺區域的商品應該是有一個定時器的，實現定時輪播，但是由於時間有限，我們沒有實現。但是呢，實現原理應該和我們的輪播圖實現效果是一樣的，這個不難。

在Goods部分，我們會用到很多Title和BannerBOx，因此我們又可以把這兩個設計為單獨的組件，需要的時候引入即可。另外，由於Title的右部分是不同的，我們使用組件插槽實現。

詳細商品

在小米官網有很多這種結構，因此我們要在這里設計一種結構，它們都是由三個部分組成。

在中間盒子部分，我們又可以看到里面有很多種類型的盒子。因此，我們又可以創建相應的子組件實現我們的功能。

我們創建五個不同類型的子組件盒子實現我們的功能。

小米官網上很多都是這種結構，到后面我們直接引入組件即可使用。因此，我也做很多這個結構。下圖是小米官網的截圖：

……

第七部分：Video

視頻部分，我們將每個視頻設計成子組件盒子。

當點擊視頻時，會出現相應視頻播放。這里我們在視頻子組件中又定義一個子組件，通過點擊這個子組件播放相應的視頻。那么問題來了，我們得把數據從Video傳到VideoBox，再沖VideoBox傳到VideoPlay。設計這里的時候，真的有點被這個數據傳遞繞暈了。

還有最坑的一點是，也許是使用video.js版本問題引發的。我之前從來沒有在vue中適用過video，因此我去百度，百度上很多人給的是這段代碼

<div class="demo1-video">  
 <video id="myVideo"   
   class="video-js vjs-default-skin vjs-big-play-centered"
   controls  //確定播放器是否具有用戶可以與之交互的控件。沒有控件，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API。
   autoplay: "muted", // //自動播放屬性,muted:靜音播放
   preload="auto"  //建議瀏覽器是否應在<video>加載元素后立即開始下載視頻數據。
   poster="../assets/img/E0531.jpg">   //設置視頻封面    <source src="../assets/video/E0531.mp4" type="video/mp4" >  //視頻地址
  </video>   
 </div>

也許是video.js版本問題，autoplay: "muted",這一句語句是不能用的。我把這句語句刪了才得以實現視頻播放。

這里耗費了我將近一個半小時的時間，實現視頻播放功能的時候，忍不住口吐芬芳，卧槽，去你大爺的！。真的是，這里太坑了！