目标效果
使用swiper实现以上效果,一定注意 swiper版本
之间的区别。
本次代码基于 swiper v5.4.5
,在swiper6和swiper4版本下也启动成功,但是在 swiper3
无法启动。
代码如下:
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true,
bulletClass: 'pag',
bulletActiveClass: 'pag-active',
renderBullet: function (index, className) {
switch (index) {
case 0:
return '<div class="' + className + '"><span>账号查询</span></div>';
break;
case 1:
return '<div class="' + className + '"><span>状态查询</span></div>';
break;
default:
break;
}
},
},
});
.swiper-pagination{
position: relative;
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
height: 0.8rem;
outline: none;
background: #F5EFFF;
}
.pag{
outline: none;
}
.pag-active{
color: red;
border-bottom: 0.05rem solid red;
}
pagination标签和swiper-container便签同级
swiper tab切换 实现左右tab切换和滚动