在一个 react 项目中使用 swiper 实现 tab 切换效果,需要用到分页器,初始化 swiper 传入了 pagination 参数但是并没有生效,分页一直不显示,审查 swiper-container 元素发现是一个空的元素,分页并没有渲染。我使用的版本是8.4.6。
代码复现
js:
import { Swiper } from 'swiper'; import 'swiper/css';
useEffect(() => {
swiperRef.current = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet(index: number, className: string) {
return `${tabDataArray[index].title}`;
},
},
loop: true,
autoplay: true,
});
}, []);
html:
11112222
解决方法:
将 import { Swiper } from ‘swiper’ 修改为 import { Swiper } from ‘swiper/swiper-bundle.esm.js’
参考issue:https://github.com/nolimits4web/swiper/issues/3768
1.如需转载本站原创文章,请务必注明文章出处并附上链接,非常感谢。
2.本站用于记录个人 工作、学习、生活,非商业网站,更多信息请 点击这里
上一篇:
下一篇: React生态相关库收藏