MUI 상단 탭 사용법에 대한 자세한 설명

MUI는 기본 APP 경험에 가장 가까운 고성능 프런트 엔드 프레임워크입니다. 더 중요한 기능은 풀다운 새로 고침, 측면 슬라이딩 탐색, 슬라이딩 트리거 작업 메뉴 및 상단(하단) 탭 등입니다.

최근 MUI를 사용하여 모바일 앱을 만들다가 작은 버그를 발견했습니다. 그건 그렇고, 나는 이 tab-top-webview-main을 연구하고 여기에서 공유합니다.

1홈페이지 코드

nbsp;html>

  
    <meta>
    <title></title>
    <meta>
    <link>
    <style>
      .d1{
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: #CCCCCC;
      }
    </style>
  
  
    <p>我是p1,下面是插入的子页面</p> <!--我们将在这个p下边插入子页面-->
  
  <script></script>
  <script>
    mui.init({
      subpages:[{        //下边是初始化，然后这个页面显示我们将插入的页面
        url:"tab-top-webview-main.html",
        id:"tab-top-webview-main.html",
        styles:{
          top:"50px",
          bottom:"0px"
        }
      }]
    })
  </script>

2서브페이지 코드

nbsp;html>

  
    <meta>
    <title>Hello MUI</title>
    <meta>
    <meta>
    <meta>
    <link>
  
  
    <p>
      </p><p>
        </p><p>
          </p><p>
            <a>
              推荐
            </a>
            <a>
              热点
            </a>
          </p>
        
      
    
    <script></script>
    <script></script>
    <script>
      mui.init();
      mui.plusReady(function() {
        var group = new webviewGroup("tab-top-webview-main.html", {
          items: [{
            id: "tab-top-subpage-1.html",  //这是子页1的路径
            url: "tab-top-subpage-1.html",
            extras: {}
          }, {
            id: "tab-top-subpage-2.html",  //这是子页2的路径
            url: "tab-top-subpage-2.html",
            extras: {}
          }],
          onChange: function(obj) {
            var c = document.querySelector(".mui-control-item.mui-active");
            if(c) {
              c.classList.remove("mui-active");
            }
            document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");
          }
        });
        mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
          var wid = this.getAttribute("data-wid");
          group.switchTab(wid);
        });
      });
      mui.back = function() {
        var _self = plus.webview.currentWebview();
        _self.close("auto");
      }
    </script>
  

3코드 설명

var group = new webviewGroup("tab-top-webview-main.html", {
  items: [{
    id: "tab-top-subpage-1.html",  //这是子页1的路径
    url: "tab-top-subpage-1.html",
    extras: {}
    }, {
      id: "tab-top-subpage-2.html",  //这是子页2的路径
      url: "tab-top-subpage-2.html",
      extras: {}
    }]
  })

　1. 서브페이지 탭 하이퍼링크a의 data-wid="" 속성을 해당 서브페이지 탭 경로로 설정해야 합니다.

<a>
              推荐
</a>

　 2. 여기서 new webviewGroup("tab-top-webview-main.html",{})의 첫 번째 매개변수는 페이지 ID를 전달해야 합니다. 이 페이지 ID는 현재 js가 위치한 페이지인 최상위 탭을 포함하는 페이지입니다

new webviewGroup("tab-top-webview-main.html", {}

　3. 항목 배열에 전달되는 것은 탭에 해당하는 하위 페이지의 가져온 하위 페이지입니다. .id, 쉼표로 구분하여 하위 페이지를 최대한 추가하세요

관련 권장 사항:

탭 기능을 구현하는 두 가지 jQuery 메서드

JavaScript 플러그인 탭 탭 상세 설명

layui 옵션 카드 효과 구현 코드

위 내용은 MUI 상단 탭 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!