使用idangerous.swiper.min.js和iscroll5.js实现横向滚动tab，并响应内容

1、我们先看一下效果图：（在UC浏览器上运行，忽略护眼绿，类似UC首页下UC头条新闻tab栏）

2、html页面代码：

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商城</title>
    <link rel="stylesheet" href="../css/light7.min.css" target="_blank" rel="external nofollow" >
    <link rel="stylesheet" href="../css/light7-swiper.min.css" target="_blank" rel="external nofollow" >
    <link rel="stylesheet" href="../css/index.css" target="_blank" rel="external nofollow" >
    <script>window.PointerEvent = void 0</script>
</head>
<body>
<div class="page" id="page-member-sale">
    <header class="bar bar-nav">
        <a class="button button-link pull-left back app-back" href="../index.html" target="_blank" rel="external nofollow" >
        </a>
        <h1 class="title">配件选购</h1>
        <a class="button button-link pull-right" href="#" target="_blank" rel="external nofollow"  data-transition="slide-in">
        </a>
    </header>
    <div class="scroll-tabs list-block" id="scroll-tabs">
        <ul>
            <li class="active">Phone</li>
            <li>IP</li>
            <li>MIFI</li>
            <li>Air conditioner</li>
            <li>Top-up card</li>
            <li>earphone</li>
            <li>X-box</li>
        </ul>
    </div>
    <div class="content">
        <div class="content-inner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="content-slide">
                            <div class="list-block goods">
                                <ul class="row no-gutter">
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="">
                                                <div class="goods-img ">
                                                    <img src="res/emoji1.jpg" alt="">
                                                </div>
                                            </div>
                                            <div class="">
                                                <div class="goods-name">OPPA 充电器 充电俩小时，通话五分钟 充电俩小时，通话五分钟 充电俩小时</div>
                                                <div class="price">
                                                    <div class="svip-price">$79</div>
                                                    <div class="vip-price">$99</div>
                                                </div>
                                                <div class="pri-price"><del>原价:$129</del></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="">
                                                <div class="goods-img ">
                                                    <img src="res/emoji2.jpg" alt="">
                                                </div>
                                            </div>
                                            <div class="">
                                                <div class="goods-name">OPPA 充电器 充电俩小时，通话五分钟 充电俩小时，通话五分钟 充电俩小时</div>
                                                <div class="price">
                                                    <div class="svip-price">$79</div>
                                                    <div class="vip-price">$99</div>
                                                </div>
                                                <div class="pri-price"><del>原价:$129</del></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="">
                                                <div class="goods-img ">
                                                    <img src="res/emoji3.jpg" alt="">
                                                </div>
                                            </div>
                                            <div class="">
                                                <div class="goods-name">OPPA 充电器 充电俩小时，通话五分钟 充电俩小时，通话五分钟 充电俩小时</div>
                                                <div class="price">
                                                    <div class="svip-price">$79</div>
                                                    <div class="vip-price">$99</div>
                                                </div>
                                                <div class="pri-price"><del>原价:$129</del></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="">
                                                <div class="goods-img ">
                                                    <img src="res/emoji4.jpg" alt="">
                                                </div>
                                            </div>
                                            <div class="">
                                                <div class="goods-name">OPPA 充电器 充电俩小时，通话五分钟 充电俩小时，通话五分钟 充电俩小时</div>
                                                <div class="price">
                                                    <div class="svip-price">$79</div>
                                                    <div class="vip-price">$99</div>
                                                </div>
                                                <div class="pri-price"><del>原价:$129</del></div>
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="content-slide">
                            tab内容二
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="content-slide">
                            tab内容三
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="content-slide">
                            tab内容4
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="content-slide">
                            tab内容5
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="content-slide">
                            tab内容6
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="content-slide">
                            tab内容7
                        </div>
                    </div>
                </div>
            </div>


        </div>

    </div>

</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/light7.min.js"></script>
<script src="../js/light7-swiper.min.js"></script>
<script src="../js/iscroll5.js"></script>
<script src="../js/idangerous.swiper.min.js"></script>
<script src="../js/i18n/cn.min.js"></script>
<script src="../js/app.js"></script>

</body>
</html>

app.js代码（上篇博客介绍了项目使用的是light7框架，统一了页面的css、js）：

$(document).on("pageInit", function (e, pageId, $page) {

    //初始化方法
    var fun = {
        public: {
            //取url的参数的方法
            getQueryString: function (paramName) {
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if(r!=null)return  unescape(r[2]); return null;
            },
            //判断localStorage是否可用
            storageAvailable: function() {
                var localstorage = window.localStorage;
                if (!!localstorage) {
                    try {
                        localstorage.setItem("key", "value");
                        localstorage.getItem("key");
                        localstorage.removeItem("key");
                        return true;
                    } catch (e) {
                        return false;
                    }
                } else {
                    return false;
                }
            },
            setBaseFs: function () {
                var deviceWidth = document.documentElement.clientWidth;
                if(deviceWidth > 640){
                    deviceWidth = 640;
                }
                document.documentElement.style.fontSize = deviceWidth / 10.8 + 'px';
            }

        }

    };

    //rem适配
    fun.public.setBaseFs();
    var myScroll;

    switch (pageId){
        case "page-index":
            var register_card = $("#register_card");
            var member_card = $("#member_card");
            if (fun.public.storageAvailable()) {
                var mToken = localStorage.getItem("token");
                if(mToken == null) {
                    register_card.css("display", "block");
                    member_card.css("display", "none");
                } else {
                    register_card.css("display", "none");
                    member_card.css("display", "block");
                }
            } else {
                $.toast('window.localStorage Error')
            }
            //
            $(".privilege-img").each(function () {
               if ($(this).hasClass("active")) {
                   // $(this).parent().attr("href", "#");
               }
            });

            var tabsSwiper = new Swiper('.swiper-container',{
                speed:500,
                onSlideChangeStart: function(){
                    $(".index-tabs .active").removeClass('active');
                    $(".index-tabs li").eq(tabsSwiper.activeIndex).addClass('active');
                    console.log("index:" + tabsSwiper.activeIndex);
                }
            });
            $(".index-tabs li").click(function () {
                $(".index-tabs .active").removeClass('active');
                $(this).addClass('active');
                tabsSwiper.swipeTo($(this).index());
            });


            break;

        case "page-register-form":
            var cb_el = $("#check");
            var reg_el = $("#register");
            isChecked();
            cb_el.click(function () {
                isChecked();
            });

            reg_el.click(function(){
                $.toast("注册");
                // window.location.href = "../index.html";
                // $.router.loadPage({
                //     url: "../index.html",
                //     noAnimation: false,
                //     replace: true
                // });
                if(fun.public.storageAvailable()){
                    localStorage.setItem("token","9c2be27f0e760fdc67d77ab9a354a");
                    $.router.replacePage("../index.html", true);
                }else{
                    $.toast('window.localStorage Error');
                }
            });

            function isChecked() {
                if(cb_el.prop("checked")){
                    reg_el.addClass("active");
                    reg_el.prop("disabled", false);
                } else {
                    reg_el.removeClass("active");
                    reg_el.prop("disabled", true);
                }
            }
            break;

        case "page-member-vip-rule":
            var isLogin = false;
            var logoutEl = $("#logout");
            if(fun.public.storageAvailable()){
                var token = localStorage.getItem("token");
                token == null ? isLogin = false : isLogin = true;
            }else{
                $.toast('window.localStorage Error');
            }

            if (isLogin) {
                logoutEl.css("display", "block");
            } else {
                logoutEl.css("display", "none");
            }

            logoutEl.click(function () {
                if (fun.public.storageAvailable()) {
                    localStorage.removeItem("token");
                    $.router.replacePage("../index.html", true);
                } else {
                    $.toast('window.localStorage Error');
                }


            });
            break;

        case "page-member-sale":
            setTimeout(function () {
                var l = 0;
                $(".scroll-tabs li").each(function () {
                    l += $(this).width() + parseInt($(this).css("padding-left").replace("px",""))
                        + parseInt($(this).css("padding-right").replace("px",""));
                });
                $(".scroll-tabs ul").width(l);

                myScroll = new IScroll("#scroll-tabs", {
                    hScrollbar: false,
                    vScrollbar: false,
                    scrollX: true,
                    scrollY: false,
                    hideScrollbar: true, //是否隐藏滚动条
                    click: true,
                });
            },100);
            // document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            var tabsSwiper = new Swiper('.swiper-container',{
                speed:500,
                onSlideChangeStart: function(){
                    $(".scroll-tabs .active").removeClass('active');
                    $(".scroll-tabs li").eq(tabsSwiper.activeIndex).addClass('active');
                    console.log("index:" + tabsSwiper.activeIndex);
                    myScroll.scrollToElement('.active',true,true);//特定元素居中
                }
            });
            $(".scroll-tabs li").click(function () {
                $(".scroll-tabs .active").removeClass('active');
                $(this).addClass('active');
                tabsSwiper.swipeTo($(this).index());
            });

            break;

    }

});

$.init();

3、步骤说明：

（1）tab标签栏，首先标签的个数不定，文字长度不一，要实现横向滑动切换，需要先计算整个tab ul的width；

var l = 0;
$(".scroll-tabs li").each(function () {
	l += $(this).width() + parseInt($(this).css("padding-left").replace("px",""))
		+ parseInt($(this).css("padding-right").replace("px",""));
});
$(".scroll-tabs ul").width(l);

tab加上iscroll（IScroll5可以支持id和class） {IScroll5中文API整理,用法与参考}

myScroll = new IScroll("#scroll-tabs", {
	hScrollbar: false,
	vScrollbar: false,
	scrollX: true,
	scrollY: false,
	hideScrollbar: true, //是否隐藏滚动条
	click: true,
});

ps:用谷歌浏览器F12移动端调试的时候， IScroll5异常卡顿、不流畅

解决办法：关闭PointerEvent（https://segmentfault.com/q/1010000008489619）

<!-- 将这段代码放在 head 标签内 -->
<script>window.PointerEvent = void 0</script>

（2）下方页面用swiper.js与tab的切换相互响应；{Swiper API}

var tabsSwiper = new Swiper('.swiper-container',{
	speed:500,
	onSlideChangeStart: function(){
		$(".scroll-tabs .active").removeClass('active');
		$(".scroll-tabs li").eq(tabsSwiper.activeIndex).addClass('active');
		console.log("index:" + tabsSwiper.activeIndex);
		myScroll.scrollToElement('.active',true,true);//特定元素居中
	}
});

onSlideChangeStart监听页面滑动事件

$(".scroll-tabs li").click(function () {
	$(".scroll-tabs .active").removeClass('active');
	$(this).addClass('active');
	tabsSwiper.swipeTo($(this).index());
});

tab li的点击事件

myScroll.scrollToElement('.active',true,true);

当tab个数较多，保持选中tab在屏幕中间。

补充：chrome禁用缓存(当开发者模式窗口打开)，调试js方便

F12 -> F1(settings)

使用idangerous.swiper.min.js和iscroll5.js实现横向滚动tab，并响应内容

补充：上传了源码。下载地址

使用idangerous.swiper.min.js和iscroll5.js实现横向滚动tab，并响应内容

继续阅读

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令详解

Compile workrave under windows &ndash; My exprience 在Windows上编译Workrave

没救了! 困扰程序员一辈子的5个魔咒, 改掉比登天还难！

门户通专访草根站长九天狼：做站贵在坚持

[转]如何成长为一名全栈工程师全栈工程师

tabpanel 使用问题

为什么把CSS放头部，script放下面

underscore模板功能的使用和学习

CSS之折叠菜单

web开发之前后端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden

JavaScript的那些坑之事件代理事件代理事件阶段

ACS基本配置-权限等级管理

vue （vue2.0）使用总结(从大体结构总结)

父子组件间传值的实现父子组件间传值的实现

vue搭建过程及出现问题