项目总结

本来想总结一下刚来做的这个项目中，遇到的一些问题，或者说，下次在做类似的项目，有哪些地方可以做的更好。结果周五周六团建两天再回来，发现忘得差不多了。(PS:下次应该随手就记下来)

暂时能想到的：

• 常用的简单动画，最好使用css去完成，不要一想起来动画就想到js。
• 页面的内容部分，左右padding最好有一些留白，这样子可以保证页面在小屏幕上，左右也会有一些留白。
• 页面header添加scroll事件，监听页面滚动距离来动态修改header的透明度。监听页面的子元素页面溢出，监听页面设置overflow-y: scroll;，获取该页面的scrollTop值。(PS:这一块老忘记)

this.$refs.home.scrollIntoView(true);
const homeParent = this.$refs.home.parentElement;
const header = this.$refs.home.firstChild;
homeParent.addEventListener("scroll", () => {
  if (homeParent.scrollTop < 80) {
    header.style.background = "none";
  } 
  else {
    header.style.backgroundImage =
      "url('http://******/swiper.png')";
  }
});

• 使用transform: scale(0.5);，即使你配合transform-origin: 0 0;一起使用，虽然元素被缩小了一倍，但是原本的位置还是在的，会自动预留出来，周围的元素并不能覆盖上去。(PS:这里挺疑惑的)

• 为啥会用到transform: scale(0.5);？设计童鞋在切图的时候，同一个功能块切出来的图大小不一，导致我们需要给每个img标签设定尺寸。(PS:就算同一个功能块，设计的icon大小不一，但是切图的时候，还是可以切成尺寸一样的，就是切出来的icon周围留白多少的问题了)