mui滚动选项卡-加强版-CSDN博客

本文链接：https://blog.csdn.net/qq_29944285/article/details/75253443
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet" />

    <script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        mui.ready(function() {

            var add = document.getElementById("add-tab")

            var wrapper = document.getElementById("scroll-wrapper");

            var width = $(document.body).width();

            add.addEventListener("tap", function() {

            })

            $(wrapper).css("width", width - 60);

            wrapper.classList.add("mui-scroll-wrapper");

            mui(wrapper).scroll({
                bounce: false
            })

            scrollWrapper();

            var slider = document.getElementById("slider");

            slider.classList.add("mui-slider");
            mui(slider).slider({
                bounce: false
            })

            mui(".mui-scroll").on("tap", ".mui-control-item", function() {
                var target = $(event.target);

                mui('.mui-slider').slider().gotoItem(target.index()); //核心代码www.bcty365.com 

            })

            document.querySelector('.mui-slider').addEventListener('slide', function(event) {

                var index = event.detail.slideNumber
                var defaultTab = $(".mui-scroll").children().get(index); //获取当前元素

                var mtap = $(".mui-scroll").children();
                var len = $(".mui-scroll").children().length //总共的个数

                var width = $(wrapper).width(); //显示的长度
                var Child = $(".mui-scroll").children().get(index);
                var widthChild = $(Child).outerWidth(); //每个节点的长度
                var num = width / widthChild;
                var numfamt = Math.floor(num); //显示的个数
                var maxscrollx = $(".mui-scroll").width()
                var hindnum = len - numfamt; //隐藏的个数
                mui.toast(maxscrollx + "长度");

                if(index <= 3) {
                    mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100)
                } else if(index > numfamt - 2) {

                    mui('.mui-scroll-wrapper').scroll().scrollTo(-50 * hindnum, 0, 100)

                }

                for(var i = 0; i < len; i++) {

                    if(i == index) {
                        defaultTab.classList.add("mui-active")

                    } else {
                        mtap.get(i).classList.remove("mui-active")
                    }

                }

            })

        })

        function scrollWrapper() {

            var scroll = mui(".mui-scroll-wrapper").scroll();

            document.querySelector(".mui-scroll-wrapper").addEventListener("scroll", function() {

                //mui.toast(scroll.x);
            })

        }
    </script>

    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #add-tab {
            position: absolute;
            margin: 5px;
            float: right;
            margin: 0pxs;
            padding: 0px;
            color: cadetblue;
            display: block;
            font-size: 30px;
            z-index: 20;
            right: 0;
            color: #000000;
        }

        #add-tab:active {
            color: #007AFF;
        }

        .mui-segmented-control.mui-scroll-wrapper {


        }

        .mui-segmented-control.mui-scroll-wrapper .mui-control-item {
            padding: 0 5px;
            height: 38px;
            border-bottom-style: solid;
            border-bottom-width: 0px;
            border-bottom-color: black;
            border-bottom-width: 2px;
        }

        .mui-segmented-control.mui-scroll-wrapper .mui-control-item.mui-active {
            border-bottom-color: blue;
            border-bottom-width: 2px;
        }
    </style>

</head>

<body>

    <div class="mui-content">
        <a id="add-tab" class=" mui-icon mui-icon-plusempty">

        </a>

        <div id="scroll-wrapper" class="mui-slider-indicator mui-segmented-control mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
                <a class="mui-control-item mui-active" value="zhaodong1">
                    推荐
                </a>
                <a id="item2" class="mui-control-item">
                    热点
                </a>
                <a class="mui-control-item">
                    北京
                </a>
                <a class="mui-control-item">
                    社会
                </a>
                <a class="mui-control-item">
                    娱乐
                </a>
                <a class="mui-control-item">
                    科技
                </a>
                <a class="mui-control-item">
                    你好
                </a>
                <a class="mui-control-item">
                    你好
                </a>
            </div>
        </div>

        <div id="slider">
            <div class="mui-slider-group">
                <div id="item1" class="mui-slider-item mui-control-content mui-active">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">第1个选项卡子项</li>
                        <li class="mui-table-view-cell">第1个选项卡子项</li>
                    </ul>
                </div>
                <div id="item2mobile" class="mui-slider-item mui-control-content">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">第2个选项卡子项</li>
                        <li class="mui-table-view-cell">第2个选项卡子项</li>
                    </ul>
                </div>
                <div id="item2mobile" class="mui-slider-item mui-control-content">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">第2个选项卡子项</li>
                        <li class="mui-table-view-cell">第2个选项卡子项</li>
                    </ul>
                </div>

                <div id="item2mobile" class="mui-slider-item mui-control-content">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">第2个选项卡子项</li>
                        <li class="mui-table-view-cell">第2个选项卡子项</li>
                    </ul>
                </div>
                <div id="item2mobile" class="mui-slider-item mui-control-content">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">第2个选项卡子项</li>
                        <li class="mui-table-view-cell">第2个选项卡子项</li>
                    </ul>
                </div>
                <div id="item2mobile" class="mui-slider-item mui-control-content">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">第2个选项卡子项</li>
                        <li class="mui-table-view-cell">第2个选项卡子项</li>
                    </ul>
                </div>
                <div id="item2mobile" class="mui-slider-item mui-control-content">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">第2个选项卡子项</li>
                        <li class="mui-table-view-cell">第2个选项卡子项</li>
                    </ul>
                </div>
                <div id="item2mobile" class="mui-slider-item mui-control-content">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">第2个选项卡子项</li>
                        <li class="mui-table-view-cell">第2个选项卡子项</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</body>