评论:基于swiper作的移动端tab拨动效果  [查看原文]

所属分类:媒体-Tabs

 47727  410  13
当前第1页 / 共1页
    无心云动1
    2018/12/8 16:18:57
    这个是基于swiper3开发的,现在swiper已经升级到4了,写法上稍微改了一点,那个高度问题,swiper4只要给一个autoHeight: true,的属性就行,自动高度,swiper3没看,具体可以看看文档
        无心云动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官网去查看文档,里面都有

    回复
    云很淡0
    2018/6/26 13:05:33
    .my-pagination ul {
       display: -webkit-box;
    }

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

        microsoftvs0
        2018/6/26 13:27:58
        -webkit-box;是针对chrome浏览器的设置。火狐的话用-moz-box
    回复
    Lonely me0
    2017/8/17 17:17:48
    谁把那个高度解决了? 回复
    熊二爷0
    2017/6/12 16:58:38
    放空0
    2017/4/12 15:54:57
    有问题  其中的每个tab公用一个高度  这会导致如果其中只有一个tab内容高度大于屏高  那么其他tab高度随前者
        |?妖娆、只是小三本性ヤ0
        2017/7/8 19:58:10

        我也遇到了

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

        你好 那你改好了吗?

    回复
    苦咖啡lala0
    2017/4/5 17:12:01

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

    回复
    黑胡椒0
    2017/3/28 11:06:10

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

    回复
    -果冻--0
    2016/12/5 10:12:10
    有bug,一直点击获取验证码时会跑位 回复
          0
    2016/12/5 10:12:20
    有问题,切换的时候,会切换错 回复

讨论这个项目(13)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

取消回复