這里主要是底部商品欄的秒殺，界面。會做靜態(tài)的和動態(tài)的，動態(tài)的尤其要注意在watch中如何操作渲染元素

如果拿到服務(wù)器的數(shù)據(jù)需要操作界面元素，一般是通過watch和$nextClick 配合使用，確保不僅數(shù)據(jù)更新了并且界面更新了

如何設(shè)置水平滾動：
一般需要子元素的寬度大于父元素的寬度
通過鼠標(biāo)的水平位移控制子元素的左外邊距
也可以使用iscroll框架，節(jié)省時間，但是由于很久沒有更新
不適用于vue
這里選用css的屬性，控制水平滾動，在容器內(nèi)設(shè)置容器內(nèi)的內(nèi)容水平滾動，并且消除滾動條

插入字體圖標(biāo)

1 靜態(tài)顯示秒殺商品

• 文件目錄

  
  
  image.png
  
  

  設(shè)置網(wǎng)頁的背景色默認(rèn)為灰色，每一欄為白色

• 結(jié)構(gòu)

  
  
  image.png
  
  

  類的命名規(guī)則是全部小寫，子類繼承父類，用-隔開

• 樣式
  
  image.png
  
  
  image.png
  
  
  image.png
  
  需要注意要給滾動元素的容器設(shè)置overflow-x的屬性，確保里面的子元素具有滾動屬性

2 服務(wù)器顯示數(shù)據(jù)

子元素寬度要根據(jù)返回商品個數(shù)變化

• 數(shù)據(jù)獲取

  
  
  image.png

• 數(shù)據(jù)渲染

  
  
  image.png
  
  

  只有確保數(shù)據(jù)數(shù)據(jù)返回了，才能通過v-for獲取其中的對象

• 數(shù)據(jù)監(jiān)聽處理設(shè)置寬度
  - 封裝倒計時函數(shù)

  
  
  image.png
  
  

  - 監(jiān)聽數(shù)據(jù)變化操作界面

  
  
  image.png