Mui +Cordova App开发 nav tabBar子页面切换

最新推荐文章于 2024-05-10 16:30:38 发布

全干攻城狮

最新推荐文章于 2024-05-10 16:30:38 发布

阅读量469

点赞数

分类专栏： Mui +Cordova 文章标签： Mui +Cordova

本文链接：https://blog.csdn.net/weixin_42127792/article/details/102953845

版权

Mui +Cordova 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

官方文档全都是基于 dcloud H5plus SDK 的，由于项目要求只是用mui前端框架 dcloud SDK 不能使用所有看到的官方文档很多Api 基本不能使用,推进项目遇到的问题较多。

但是用如下方法切换tab页时，每次切换会导致页面重新绘制，如果逻辑简单应使用 div模式选项卡

<body>

       <header class="mui-bar mui-bar-nav">
           <a class="mui-action-back"></a>
           <h1 class="mui-title" id="title">H5模式actionsheet</h1>
       </header>
       <nav class="mui-bar mui-bar-tab">
           <a class="mui-tab-item mui-active" href="home/home.html">
               <span class="mui-icon mui-icon-home"></span>
               <span class="mui-tab-label">首页</span>
           </a>
           <a class="mui-tab-item" href="work/work.html">
               <span class="mui-icon mui-icon-email">
               </span>
               <span class="mui-tab-label">作业单</span>
           </a>
           <a class="mui-tab-item" href="mine/mine.html">
               <span class="mui-icon mui-icon-contact"></span>
               <span class="mui-tab-label">我的</span>
           </a>
       </nav>
   </body>
   <script src="../js/jquery.min.js"></script>
   <script src="../js/mui.min.js"></script>
   <script src="../js/main.js"></script>

JS文件如下:

mui.init({
   subpages: [{
       url: 'home/home.html',
       id: 'MainViwe',
       styles: {
           top: '40px', //mui标题栏默认高度为45px；
           bottom: '0px' //默认为0px，可不定义；
       },
       extras: {} //自定义扩展参数
   }],

});
mui.ready(function() {
   console.log("mui ready");
   // mui.preload 只有在 h5plus 环境才生效
   // var work = mui.preload({
   //    url: 'work/work.html',
   //    id: 'work',
   //    styles: {
   //        top: '40px', //mui标题栏默认高度为45px；
   //        bottom: '0px' //默认为0px，可不定义；
   //    }, //窗口参数
   //    extras: {} //自定义扩展参数
   // });
   // console.log(work);
})

// var subs = mui(document).subpages;;

var info = document.getElementById("title");
var currentId = "home/home.html";
mui('.mui-bar-tab').on('tap', 'a', function() {
   // let currentId = this.getAttribute("id");
   // info.innerHTML = currentId;
   var targetTab = this.getAttribute('href');
   if (currentId != targetTab) { //非当前页切换 tab
       currentId = targetTab;
       // document.getElementById("MainViwe").setAttribute('src', targetTab);
       $('#MainViwe').attr('src', targetTab);
       //修改标题
       info.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
   }

});

全干攻城狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Mui +Cordova App开发 nav tabBar子页面切换

官方文档全都是基于 dcloud H5plus SDK 的，由于项目要求只是用mui前端框架dcloud SDK 不能使用所有看到的官方文档很多Api 基本不能使用,推进项目遇到的问题较多。但是用如下方法切换tab页时，每次切换会导致页面重新绘制，如果逻辑简单应使用div模式选项卡<body> <header class="mui-bar mui...
复制链接

扫一扫

专栏目录