写在前面
这应该是我人生第一次写博客，之前很长一段时间都有这个想法，但一直没有付诸于实践。平台的选择对我来说也是一大困难。之前在学校里用CSDN比较多(上面有很多代码可以copy😁)。后来也是看着那个平台一步步变得越来越难用，虽然掘金在内容上可能比不得csdn，但是在使用体验上确实狠狠地吊打了。七月份刚走出校园踏入职场的我希望能与掘金平台一起努力，见证我的一步步成长。
需求
作为校招应届生的我会经历为期两个月的培训，培训期间我们会做一些分派的作业。这不，公司给了这么一个需求，就是完成一个走马灯的展示(类似轮播图，是一组轮播区域)。这个组件常用于展示一组平级内容，当空间不足时就可以使用走马灯的形式来进行收纳，以轮播的形式进行展示。类似下图展示：
当手指滑动时，可以将元素水平移动一个版面的宽度，下面的指示器也会跟随一起移动。
解决方案
一开始我是打算用轮播图的思路来写，但写完后发现效果并不是很好。时间给的也很有限，于是就打算寻找一些已有的开源组件，最终选择了antd-mobile中 Swiper 组件，它的文档介绍也很全面。（人有时候确实不能太较劲，思路要灵活，懂得变通）
使用步骤
首先在项目中(我的是React项目)引入antd-mobile
npm install antd-mobile
之后在需要的地方引入 Swiper 组件
import { Swiper } from "antd-mobile";
Swiper组件是一个外壳，真正需要展示的内容需要使用<Swiper.Item>来进行包裹
<Swiper>
<Swiper.Item key={index}>
<div
className={styles.content}
style={{ background: color }}
onClick={() => {
Toast.show(`你点击了卡片 ${index + 1}`)
}}
>
{index + 1}
</div>
</Swiper.Item>
</Swiper>
这个没什么好说的，只要按照官方的步骤一步一步来就可以了。包括其他的配置属性按照官方文档的来就可以了，例如是否自动播放，或者时间间隔之类的。地址在这里Swiper组件官方文档
PageIndicator
接下来我想聊聊关于指示器样式的设置，官方的默认样式很不错，但为了满足不同的UI需求，我们需要自定义指示器(轮博内容下面的小点点)样式。
官方提供了indicatorProps来设置指示器样式，需要写在Swiper标签内。例如活跃的指示器的颜色我们可以使用color："" 来设置。官方只提供了两种颜色设置，分别是默认的 primary 和 white两种。
同时，你也可能会注意到，上面两个指示器一个在轮播区域内，一个在轮播区域外，这个也是可以进行设置的。通过设置'--track-padding' 可以设置轮播区域的padding从而将指示器与轮播图“分离”的效果。
<Swiper
style={{
'--track-padding': ' 0 0 16px',
}}
>
同时，我们也可以自定义指示器内容，官方提供了 indicator 属性，可以让我们自定义展示指示器的内容，而不必是一堆小圆点，甚至它的位置也可以进行修改。代码如下：
<Swiper
indicator={(total, current) => (
<div className={styles.customIndicator}>
{`${current + 1} / ${total}`}
</div>
)}
>
我们在 indicator 属性中返回了一个ReactNode，这个将来是要渲染为指示器的，我们可以给它添加className，这样就有了自定义的样式。函数有两个参数，分别是当前元素的index和元素个数。
当然了，如果我们在函数内返回 null，那指示器就会消失。
最后，在 indicatorProps 属性中，官方支持 PageIndicator 组件的style属性，我们在里面可以设置更多的属性已满足我们多样化的需求。读者可以自行点击链接阅读官方文档，查看所有的属性，下面是我的示例：
<Swiper
style={{
"--track-padding": " 0 0 .25rem", //指示器与轮播区域分离
}}
indicatorProps={{
style: {
"--active-dot-color": "#f7e3d7", //当前元素圆点颜色
"--dot-border-radius": "50%", //元素圆点圆角值
"--active-dot-border-radius": "3px", //当前元素圆点的圆角值
"--active-dot-size": "12px", //元素圆点的大小
"--dot-color": "#655e58", //元素圆点的颜色
"--dot-size": "5px", //元素圆点的大小
"--dot-spacing": "5px", //圆点与圆点之前的距离
},
}}
defaultIndex={0}
>
结尾
文章到这里就结束了，整体来说没有什么技术含量，只是简单记录了一下自己使用工具完成需求的一次过程。
看着满天的底层原理，深入探究等字眼的文章，我一个刚开始工作的前端小菜鸡瑟瑟发抖。希望我有一天也能成为那样的人。😂
希望我的这篇文章能够帮助到需要的人，那样我的文章也就有了自己的价值。
