基于swiper作的移动端tab拨动效果

无心云动1
2018/12/8 16:19:45

我贴一下我新的写法


var tabSwiper = new Swiper('#tab-warp', {
    autoHeight: true, // 自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
    allowTouchMove: true, // 允许触摸滑动。设为false时，slide无法滑动，只能使用扩展API函数例如slideNext() 或slidePrev()或slideTo()等改变slides滑动
    resistance: true, // 边缘抵抗。当swiper已经处于第一个或最后一个slide时，继续拖动Swiper会离开边界，释放后弹回。
    resistanceRatio: 0.7, // 抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。
    pagination: { // 分页器
        el: '.my-pagination-ul',
        clickable: true,
        renderBullet: function(index, className) {
            switch (index) {
                case 0:
                    name = '正在匹配订单';
                    break;
                case 1:
                    name = '已完成匹配订单';
                    break;
                default:
                    name = '';
            }
            return '<li class="' + className + '">' + name + '</li>';
        }
    },
})

差不多是这个样子，具体可以去swiper官网去查看文档，里面都有

.my-pagination ul {
   display: -webkit-box;
}

这就是问什么其他浏览器不正常

microsoftvs0
2018/6/26 13:27:58
-webkit-box;是针对chrome浏览器的设置。火狐的话用-moz-box

|?妖娆、只是小三本性ヤ0
2017/7/8 19:58:10

我也遇到了

Lonely me0
2017/8/17 16:56:18

你好 那你改好了吗？

这个是怎么用的 ，我试了一下只有一个选项卡，什么问题啊

我这边IE11・・・・・・Tab标签无法正常显示