C 端那些常见的技术

1、轮播图插件

swiper swiper 是一款免费的移动端功能强大的轮播图插件，demo 丰富, 支持自定义样式、分页、3d 旋转、嵌套轮播等功能。 github 上有 29.3 k 的 Star 。

react-id-swiper 是基于 swiper 封装的 reactJs 组件，使用简单。

2、css 实现横向滚动

react.js 文件：

<div className={styles.scroll}>
  <div className={styles.wrap}>
      {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(item => {
          return (
            <div className={styles.item}>{item}</div>
          )
       })}
   </div>
</div>

css 样式：

.scroll {
  margin-top: -10px;
  overflow: hidden;
}

.wrap {
  position: relative;
  top: 10px;
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 10px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  &::-webkit-scrollbar {
    display: none;
  }
}

.item {
  width: 200px;
  height: 100px;
  margin-right: 10px;
  flex-shrink: 0;
  background-color: red;
}

视频效果：www.bilibili.com/video/BV1dg…

（吐槽：掘金什么时候能增加个视频上传功能。。。）