MUI顶部选项卡的用法

互联网 17-10-13

前言

　MUI是一款最接近原生APP体验的高性能前端框架，它的比较重要的功能是：下拉刷新、侧滑导航、滑动触发操作菜单和顶部(底部)选项卡等

最近用MUI做手机app应用的时候，遇到的小bug。顺便研究了一下这个tab-top-webview-main，这里给大家分享一下。

1主页代码

<!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="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>

2子页代码

<!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">      </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" data-wid="tab-top-subpage-1.html">                              推荐                        </a>                          <a class="mui-control-item" href="#item2mobile" 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>

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 class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">                              推荐</a>

　　2、这里，new webviewGroup("tab-top-webview-main.html",{}) 第一个参数需要传入一个页面的id。需要注意的是，这个页面id 就是我们包含顶部选项卡的页面，也就是当前我们这段js所在的页面

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

　　3、 items数组中传入的是子页对应选项卡该导入的子页面的id，有几个子页就添加几个子页，中间用逗号分隔

以上就是MUI顶部选项卡的用法的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：顶部

MUI顶部选项卡的用法

1主页代码

2子页代码

3代码解释

相关资讯

标签推荐