Detailed explanation of the usage of the top tab of MUI-JS Tutorial-php.cn

Detailed explanation of the usage of the top tab of MUI

小云云

Release： 2018-01-27 13:17:28

Original

3332 people have browsed it

MUI is a high-performance front-end framework that is closest to the native APP experience. Its more important functions are: pull-down refresh, side-sliding navigation, sliding trigger operation menu and top (bottom) tabs, etc.

I recently encountered a small bug when using MUI to make a mobile app. By the way, I studied this tab-top-webview-main, and I will share it with you here.

1Home page code

<!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="external nofollow" rel="external nofollow" rel="stylesheet" />
    <style type="text/css">
      .d1{
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: #CCCCCC;
      }
    </style>
  </head>
  <body>
    <p class="d1">我是p1,下面是插入的子页面</p> <!--我们将在这个p下边插入子页面-->
  </body>
  <script src="js/mui.min.js"></script>
  <script type="text/javascript">
    mui.init({
      subpages:[{        //下边是初始化，然后这个页面显示我们将插入的页面
        url:"tab-top-webview-main.html",
        id:"tab-top-webview-main.html",
        styles:{
          top:"50px",
          bottom:"0px"
        }
      }]
    })
  </script>
</html>

Copy after login

2Subpage code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css" rel="external nofollow" rel="external nofollow" >
  </head>
  <body>
    <p class="mui-content">
      <p id="slider" class="mui-slider mui-fullscreen">
        <p id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
          <p class="mui-scroll">
            <a class="mui-control-item mui-active" href="#item1mobile" rel="external nofollow" rel="external nofollow" data-wid="tab-top-subpage-1.html">
              推荐
            </a>
            <a class="mui-control-item" href="#item2mobile" rel="external nofollow" data-wid="tab-top-subpage-2.html">
              热点
            </a>
          </p>
        </p>
      </p>
    </p>
    <script src="js/mui.min.js"></script>
    <script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></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>
  </body>
</html>

Copy after login

3Code explanation

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: {}
    }]
  })

Copy after login

1. Data- of the hyperlink a of the subpage tab The wid="" attribute needs to be set to the corresponding subpage tab path.

<a class="mui-control-item mui-active" href="#item1mobile" rel="external nofollow" rel="external nofollow" data-wid="tab-top-subpage-1.html">
              推荐
</a>

Copy after login

　2. Here, the first parameter of new webviewGroup("tab-top-webview-main.html",{}) needs to pass in the id of a page. It should be noted that this page id is the page that contains the top tab, which is the page where our js is currently located

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

Copy after login

　3. What is passed in the items array is the import of the tab corresponding to the subpage The id of the subpage, if there are several subpages, add several subpages, separated by commas

Related recommendations:

Two jQuery methods to implement the tab function

Detailed explanation of JavaScript plug-in Tab

##layui tab effect implementation code

The above is the detailed content of Detailed explanation of the usage of the top tab of MUI. For more information, please follow other related articles on the PHP Chinese website!