使用swiper来编写tab分页的方法，不使用display传统方法

最新推荐文章于 2023-08-22 11:30:58 发布

前端先疯队

最新推荐文章于 2023-08-22 11:30:58 发布

阅读量673

点赞数

分类专栏：前端基础文章标签：成长

本文链接：https://blog.csdn.net/CheckMate_Room/article/details/79214252

版权

前端基础专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<div class="my-pagination my-pagination1">
  <ul class="my-pagination-ul" id="my-pagination-ul"></ul>
</div>

此处为html部分中tab分页的容器。

var mySwiper = new Swiper('#swiper-container', {
    pagination: '#my-pagination-ul',
    effect:'fade',//切换效果
    paginationClickable: true,
    noSwiping : true,//禁止滑动
    noSwipingClass:'noSwiping',//禁止滑动的标签
    initialSlide: initSlide == null?0:initSlide, //设置起始页
    paginationBulletRender: function(swiper, index, className) {//warper里面有几个兄弟元素,就会循环几次
        var shopping = "";
        switch(index) {
            case 0:
                name = '首页';
                break;
            case 1:
                name = '购物车';
                shopping = "shopping";
                break;
            case 2:
                name = '个人中心';
                break;
            default:
                name = '';
                break;
        }
        return '<li class="' + className + ' noSwiping" id="'+ shopping +'">' + name + '</li>';
    },
    onSlideChangeStart: function(swiper) {

    },
    onInit: function(swiper) {
        //初始化刷新页面

    }
});