這里主要是底部商品欄的秒殺瓮下，界面。會(huì)做靜態(tài)的和動(dòng)態(tài)的，動(dòng)態(tài)的尤其要注意在watch中如何操作渲染元素
如果拿到服務(wù)器的數(shù)據(jù)需要操作界面元素，一般是通過(guò)watch和$nextClick 配合使用禽翼，確保不僅數(shù)據(jù)更新了并且界面更新了
如何設(shè)置水平滾動(dòng)：
一般需要子元素的寬度大于父元素的寬度
通過(guò)鼠標(biāo)的水平位移控制子元素的左外邊距
也可以使用iscroll框架，節(jié)省時(shí)間族跛，但是由于很久沒(méi)有更新
不適用于vue
這里選用css的屬性捐康，控制水平滾動(dòng)，在容器內(nèi)設(shè)置容器內(nèi)的內(nèi)容水平滾動(dòng)庸蔼，并且消除滾動(dòng)條
插入字體圖標(biāo)
1 靜態(tài)顯示秒殺商品
-
文件目錄
image.png
設(shè)置網(wǎng)頁(yè)的背景色默認(rèn)為灰色，每一欄為白色
-
結(jié)構(gòu)
image.png
類的命名規(guī)則是全部小寫(xiě)贮匕，子類繼承父類姐仅，用-隔開(kāi)
- 樣式
image.png
image.png
image.png
需要注意要給滾動(dòng)元素的容器設(shè)置overflow-x的屬性，確保里面的子元素具有滾動(dòng)屬性
2 服務(wù)器顯示數(shù)據(jù)
子元素寬度要根據(jù)返回商品個(gè)數(shù)變化
-
數(shù)據(jù)獲取
image.png -
數(shù)據(jù)渲染
image.png
只有確保數(shù)據(jù)數(shù)據(jù)返回了，才能通過(guò)v-for獲取其中的對(duì)象
-
數(shù)據(jù)監(jiān)聽(tīng)處理設(shè)置寬度
- 封裝倒計(jì)時(shí)函數(shù)
image.png
- 監(jiān)聽(tīng)數(shù)據(jù)變化操作界面
image.png
