mui-选项卡+scroll滚动

时间:2021-04-09 17:10:36

详细操作见代码:

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        
        
        <!--
            mtab:快捷键
            mui-segmented-control:多选项控制卡父级
            mui-control-item:多选项卡子级
            mui-active:选中状态
            mui-control-content:每一个选项卡的具体内容,用id通过锚链接获取信息:列如href="#m1"
            mui-segmented-control-inverted:背景颜色反转
            mui-segmented-control-negative(posivite):红色的
            mui-segmented-control-vertical:选项卡竖着的
            
            设置滚动效果:
            mui-scroll-wrapper:滚动菜单父级
            mui-scroll:滚动菜单子集
            mui-slider-indicator:设置横向滚动效果,默认不写,纵向滚动效果
        -->
        <div class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative mui-scroll-wrapper mui-slider-indicator">
            
            <div class="mui-scroll">
            <a href="#m1" class="mui-control-item">新闻</a>
            <a href="#m2" class="mui-control-item mui-active">政治</a>
            <a href="#m3" class="mui-control-item">娱乐</a>
            <a href="#m4" class="mui-control-item">推荐</a>
            <a href="#m5" class="mui-control-item ">健身</a>
            <a href="#m6" class="mui-control-item">文学</a>
            <a href="#m7" class="mui-control-item">天文</a>
            <a href="#m8" class="mui-control-item ">地理</a>
            <a href="#m9" class="mui-control-item">数学</a>
            
        </div>
        </div>
        
        <div class="mui-control-content" id="m1">
            你好啊,
        </div>
        <div class="mui-control-content mui-active" id="m2">
            你在吗,
        </div>
        <div class="mui-control-content" id="m3">
            你累吗,
        </div>
        
        <div class="mui-control-content" id="m4">
            你好啊,
        </div>
        <div class="mui-control-content " id="m5">
            你在吗,
        </div>
        <div class="mui-control-content" id="m6">
            你累吗,
        </div>
        <div class="mui-control-content" id="m7">
            你好啊,
        </div>
        <div class="mui-control-content " id="m8">
            你在吗,
        </div>
        <div class="mui-control-content" id="m9">
            你累吗,
        </div>
        
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-phone"></span>
                <span class="mui-tab-label">电话</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">邮件</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </a>
        </nav>
        
        
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
        </script>
    </body>

</html>

具体效果如下:

mui-选项卡+scroll滚动