大哥们,有没有用vue和mui一起过来开发过app的

发布网友发布时间：2022-04-23 21:38

共3个回答

懂视网时间：2022-04-20 05:19

最近用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，有几个子页就添加几个子页，中间用逗号分隔

热心网友时间：2022-04-20 02:27

mui开发注意事项MuiHTML5开发框架mui是一个高性能的Html5开发框架，从UI到效率，都在极力追求原生体验；这个框架自身有一些规则，刚接触的同学不很熟悉，特总结本文；想了解mui更详细的信息，请访问mui官网。DOM结构关于mui页面的dom，你需要知道如下规则：固定栏靠前所谓的固定栏，也就是带有.mui-bar（类选择器）属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：放在mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；###一切内容都要包裹在mui-content中除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮罩，原因：固定栏基于Fixed定位，不受流式布局*，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮罩，mui为了解决这个问题，定义了如下css代码：.mui-bar-nav~.mui-content{padding-top:44px;

热心网友时间：2022-04-20 03:45

之前学习angular的时候接触过一个叫Ionic(Ionic:AdvancedHTML5HybridMobileAppFramework)的框架，官方描述是Thebeautiful,opensourcefront-endSDKfordevelopinghybridmobileappswithHTML5.Ionic是一个用HTML,CSS跟JS开发