项目需求： #

实现天气 24 小时预报，类似于华为等天气 app，有个可以滑动的区域

完成效果 #

Image Image

分析 #

在 web 中，我们要实现滚动特效，只需要设定一个高度 or 宽度，然后使用overflow: scroll;就可以出现一个滚动条了。 那么同理，我们这边也这么实现。

.nav {
  // 因为要水平滚动，可以设置100%
  width: 100%;
  // 水平不换行！！！实现关键
  white-space: nowrap;
  // 出现水平方向的滚动条
  overflow-x: scroll;
  // 如果溢出高度不够，就要隐藏，
  overflow-y: hidden;
}

如此实现，那么你就基本实现了水平滚动 但是有个滚动条就有点丑，不要怕，只需要隐藏就好了

.nav::-webkit-scrollbar {
 display: none;
}