mui 滑动选项卡

最新推荐文章于 2020-08-11 14:17:22 发布

原创最新推荐文章于 2020-08-11 14:17:22 发布 · 964 阅读

2 ·

CC 4.0 BY-SA版权

mui 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用MUI框架实现的移动端选项卡滑动切换效果示例。通过HTML、CSS和JavaScript代码展示了如何创建一个包含多个选项卡的界面，并在用户点击不同选项卡时，能够平滑地切换到对应的面板内容。该示例适用于希望为移动应用增加流畅用户体验的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

    <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() {


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

                    mui('.mui-slider').slider().gotoItem(target.index()); 

                })

                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

                    if(index <= 4) {
                        mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100)
                    } else {
                        var mScrollx = 74 * (index - 4);
                        mui('.mui-scroll-wrapper').scroll().scrollTo(-mScrollx, 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")
                        }

                    }
                })

            })
        </script>
        <style type="text/css">

        </style>

    </head>

    <body>

        <div class="mui-scroll-wrapper 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>

            </div>
        </div>

        <div class="mui-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>
        </div>

    </body>

</html>