zoukankan      html  css  js  c++  java
  • 18、滑动导航选择

    mui提供了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格组件,这些组件都用到了mui框架的slide插件,有较多共同点。首先,Dom内容构造基本相同,都必须有一个.mui-slider的父容器;其次,当拖动切换显示内容时,均会触发slide事件(可拖动式选项卡在点击选项卡标题时,也会触发slide事件),通过该事件的detail.slideNumber参数可以获得当前显示项的索引(第一项索引为0,第二项为1,以此类推),利用该事件,可在显示内容切换时,动态处理一些业务逻辑。

    HTML部分:

    <div class="mui-slider">
        <!--选项卡标题区-->
        <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
          <a class="mui-control-item" href="#item1">待办公文</a>
          <a class="mui-control-item" href="#item2">已办公文</a>
          <a class="mui-control-item" href="#item3">全部公文</a>
        </div>
        <div class="mui-slider-progress-bar mui-col-xs-4"></div>
        <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">待办公文2</li>
              <li class="mui-table-view-cell">待办公文3</li>
            </ul>
          </div>
          <!--第二个选项卡内容区,页面加载时为空-->
          <div id="item2" class="mui-slider-item mui-control-content"><ul class="mui-table-view">
              <li class="mui-table-view-cell">待办公文1</li>
              <li class="mui-table-view-cell">待办公文2</li>
              <li class="mui-table-view-cell">待办公文3</li>
            </ul></div>
          <!--第三个选项卡内容区,页面加载时为空-->
          <div id="item3" class="mui-slider-item mui-control-content"></div>
        </div>
    </div>

    JavaScript部分:

    var item2Show = false,item3Show = false;//子选项卡是否显示标志
    document.querySelector('.mui-slider').addEventListener('slide', function(event) {
      if (event.detail.slideNumber === 1&&!item2Show) {
        //切换到第二个选项卡
        //根据具体业务,动态获得第二个选项卡内容;
        var content = 'er';
        //显示内容
        document.getElementById("item2").innerHTML = content;
        //改变标志位,下次直接显示
        item2Show = true;
      } else if (event.detail.slideNumber === 2&&!item3Show) {
        //切换到第三个选项卡
        //根据具体业务,动态获得第三个选项卡内容;
        var content = 'san';
        //显示内容
        document.getElementById("item3").innerHTML = content;
        //改变标志位,下次直接显示
        item3Show = true;
      }
    });
  • 相关阅读:
    OrCAD原理图封装规则
    web的脚本安全-CSRF
    web的脚本安全-XSS
    数据库中左右连接
    如何解决Java.lang.NoClassDefFoundError
    css垂直居中
    网上免费的web service地址
    JS 正则表达式用法
    jQuery实现滚动条向下拉到一定的程度,然后这层就一直占着不管滚动条如何向下拉都不动了的效果
    Robot Framework + Selenium2Library环境下,结合Selenium Grid实施分布式自动化测试
  • 原文地址:https://www.cnblogs.com/zhouyuxiang/p/4925360.html
Copyright © 2011-2022 走看看