15-首页秒杀下

这里主要是底部商品栏的秒杀，界面。会做静态的和动态的，动态的尤其要注意在watch中如何操作渲染元素

如果拿到服务器的数据需要操作界面元素，一般是通过watch和$nextClick 配合使用，确保不仅数据更新了并且界面更新了

如何设置水平滚动：
一般需要子元素的宽度大于父元素的宽度
通过鼠标的水平位移控制子元素的左外边距
也可以使用iscroll框架，节省时间，但是由于很久没有更新
不适用于vue
这里选用css的属性，控制水平滚动，在容器内设置容器内的内容水平滚动，并且消除滚动条

插入字体图标

1 静态显示秒杀商品

• 文件目录

  
  image.png
  

  设置网页的背景色默认为灰色，每一栏为白色

• 结构

  
  image.png
  

  类的命名规则是全部小写，子类继承父类，用-隔开

• 样式
  image.png
  image.png
  image.png
  需要注意要给滚动元素的容器设置overflow-x的属性，确保里面的子元素具有滚动属性

2 服务器显示数据

子元素宽度要根据返回商品个数变化

• 数据获取

  
  image.png

• 数据渲染

  
  image.png
  

  只有确保数据数据返回了，才能通过v-for获取其中的对象

• 数据监听处理设置宽度
  - 封装倒计时函数

  
  image.png
  

  - 监听数据变化操作界面

  
  image.png