使用antd-mobile Swiper 组件实现走马灯效果

·  阅读 1489
使用antd-mobile Swiper 组件实现走马灯效果

写在前面

这应该是我人生第一次写博客,之前很长一段时间都有这个想法,但一直没有付诸于实践。平台的选择对我来说也是一大困难。之前在学校里用CSDN比较多(上面有很多代码可以copy😁)。后来也是看着那个平台一步步变得越来越难用,虽然掘金在内容上可能比不得csdn,但是在使用体验上确实狠狠地吊打了。七月份刚走出校园踏入职场的我希望能与掘金平台一起努力,见证我的一步步成长。

需求

作为校招应届生的我会经历为期两个月的培训,培训期间我们会做一些分派的作业。这不,公司给了这么一个需求,就是完成一个走马灯的展示(类似轮播图,是一组轮播区域)。这个组件常用于展示一组平级内容,当空间不足时就可以使用走马灯的形式来进行收纳,以轮播的形式进行展示。类似下图展示:

截屏2022-07-17 下午3.23.43.png

当手指滑动时,可以将元素水平移动一个版面的宽度,下面的指示器也会跟随一起移动。

解决方案

一开始我是打算用轮播图的思路来写,但写完后发现效果并不是很好。时间给的也很有限,于是就打算寻找一些已有的开源组件,最终选择了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两种。

截屏2022-07-17 下午4.26.38.png

截屏2022-07-17 下午4.26.21.png

同时,你也可能会注意到,上面两个指示器一个在轮播区域内,一个在轮播区域外,这个也是可以进行设置的。通过设置'--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和元素个数。

截屏2022-07-17 下午4.34.10.png

当然了,如果我们在函数内返回 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}
>
复制代码

结尾

文章到这里就结束了,整体来说没有什么技术含量,只是简单记录了一下自己使用工具完成需求的一次过程。

看着满天的底层原理,深入探究等字眼的文章,我一个刚开始工作的前端小菜鸡瑟瑟发抖。希望我有一天也能成为那样的人。😂

希望我的这篇文章能够帮助到需要的人,那样我的文章也就有了自己的价值。

--end

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改