mui滚动选项卡-加强版

来源：互联网发布：java 游戏服务器架构编辑：程序博客网时间：2024/05/21 19:27
<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>
阅读全文
0 0