Detailed explanation of the usage of the top tab of MUI

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

        
  
我是p1,下面是插入的子页面
     

2Subpage code

         
  
 
 
 
  推荐   热点  
 
 
 
     

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

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

 推荐 

　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", {}

　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!