MUI实现顶部可滑动选项卡

素颜马尾好姑娘i 2024-04-17 15:42 141阅读 0赞

实现效果

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70

案例源码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.         <title>顶部可滑动选项卡</title>
  7.         <script src="js/mui.min.js"></script>
  8.         <link href="css/mui.min.css" rel="stylesheet" />
  9.         <script type="text/javascript" charset="utf-8">
  10.             mui.init();
  11.         </script>
  12.     </head>
  13.     <body>
  14.         <header class="mui-bar mui-bar-nav">
  15.             <h1 class="mui-title">出行记</h1>
  16.         </header>
  17.         <div class="mui-content">
  18.             <div id="slider" class="mui-slider mui-fullscreen">
  19.                 <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
  20.                     <div class="mui-scroll">
  21.                         <a class="mui-control-item mui-active" href="#item1mobile">
  22.                             推荐
  23.                         </a>
  24.                         <a class="mui-control-item" href="#item2mobile">
  25.                             运动
  26.                         </a>
  27.                         <a class="mui-control-item" href="#item3mobile">
  28.                             玩乐
  29.                         </a>
  30.                         <a class="mui-control-item" href="#item4mobile">
  31.                             游记
  32.                         </a>
  33.                         <a class="mui-control-item" href="#item5mobile">
  34.                             电影
  35.                         </a>
  36.                         <a class="mui-control-item" href="#item6mobile">
  37.                             美食
  38.                         </a>
  39.                     </div>
  40.                 </div>
  41.                 <div class="mui-slider-group">
  42.                     <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
  43.                         <div id="scroll1" class="mui-scroll-wrapper">
  44.                             <div class="mui-scroll">
  45.                                 推荐
  46.                             </div>
  47.                         </div>
  48.                     </div>
  49.                     <div id="item2mobile" class="mui-slider-item mui-control-content">
  50.                         <div id="scroll2" class="mui-scroll-wrapper">
  51.                             <div class="mui-scroll">
  52.                                 运动
  53.                             </div>
  54.                         </div>
  55.                     </div>
  56.                     <div id="item3mobile" class="mui-slider-item mui-control-content">
  57.                         <div id="scroll3" class="mui-scroll-wrapper">
  58.                             <div class="mui-scroll">
  59.                                 玩乐
  60.                             </div>
  61.                         </div>
  62.                     </div>
  63.                     <div id="item4mobile" class="mui-slider-item mui-control-content">
  64.                         <div id="scroll3" class="mui-scroll-wrapper">
  65.                             <div class="mui-scroll">
  66.                                 游记
  67.                             </div>
  68.                         </div>
  69.                     </div>
  70.                     <div id="item5mobile" class="mui-slider-item mui-control-content">
  71.                         <div id="scroll3" class="mui-scroll-wrapper">
  72.                             <div class="mui-scroll">
  73.                                 电影
  74.                             </div>
  75.                         </div>
  76.                     </div>
  77.                     <div id="item6mobile" class="mui-slider-item mui-control-content">
  78.                         <div id="scroll3" class="mui-scroll-wrapper">
  79.                             <div class="mui-scroll">
  80.                                 美食
  81.                             </div>
  82.                         </div>
  83.                     </div>
  84.                 </div>
  85.             </div>
  86.         </div>
  87.         <script type="text/javascript">
  88.             // 点击北京回到原点
  89.             document.querySelectorAll('.mui-control-item')[2].addEventListener('tap', function() {
  90.                 mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 900);
  91.             });
  92.             // 点击游记左滑80px
  93.             document.querySelectorAll('.mui-control-item')[3].addEventListener('tap', function() {
  94.                 mui('.mui-scroll-wrapper').scroll().scrollTo(-80, 0, 900);
  95.             });
  96.         </script>
  97.     </body>
  98. </html>

GitHub：

https://github.com/lwqbrell/top_scroll_tab

发表评论

表情：
评论列表 （有 0 条评论，141人围观）

还没有评论，来说两句吧...

相关阅读

    相关 MUI实现侧方选项卡功能

    引言 对于线上行业而言，分类栏目可以帮助我们快速找到所需要的商品或文章等。而现在实现这种分类效果的大多数以侧方选项卡的形式来实现，所以掌握该技能可以大大的提高平时的开...

    迈不过友情╰迈不过友情╰/ 0 赞/ 143 阅读