幼敏悟过人,读书辄成诵。这篇文章主要讲述muiapp中如何实现每次tab切换都刷新页面相关的知识,希望能为你提供帮助。
tab.html:主要控制tab切换的:
< !DOCTYPE html> < html> < head> < meta charset="utf-8"> < meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> < title> < /title> < script src="https://www.songbingjia.com/android/js/mui.min.js"> < /script> < link href="https://www.songbingjia.com/android/css/mui.min.css" rel="stylesheet" /> < style type="text/css"> .tab-icon { width: 1.25rem; height: 1.25rem; }.aa { display: table-cell; overflow: hidden; width: 1%; height: 50px; text-align: center; vertical-align: middle; white-space: nowrap; text-overflow: ellipsis; color: #929292; }.aa .mui-icon { top: 3px; width: 24px; padding-top: 0; padding-bottom: 0; }.aa .mui-tab-label { font-size: 11px; display: block; overflow: hidden; text-overflow: ellipsis; } < /style> < /head> < body> < nav class="mui-bar mui-bar-tab" id="tabBar"> < span class="aa mui-active" href="https://www.songbingjia.com/android/homePage.html"> < span class="mui-icon"> < img class="tab-icon" src="https://www.songbingjia.com/android/img/diImg/shouyeBlue.png" data-icon="shouye" /> < /span> < span class="mui-tab-label" style="color: #358dfd; "> 首页< /span> < /span> < span class="aa " href="https://www.songbingjia.com/android/task.html"> < span class="mui-icon"> < img class="tab-icon" src="https://www.songbingjia.com/android/img/diImg/lsrwGray.png" data-icon="lsrw" /> < /span> < span class="mui-tab-label"> 任务< /span> < /span> < span class="aa" href="https://www.songbingjia.com/android/wode.html"> < span class="mui-icon"> < img class="tab-icon" src="https://www.songbingjia.com/android/img/diImg/wodeGray.png" data-icon="wode" /> < /span> < span class="mui-tab-label"> 我的< /span> < /span> < /nav> < /body> < script type="text/javascript" charset="utf-8"> var subpages = [\'homePage.html\', \'task.html\', \'wode.html\']; var subpage_style = { top: \'0px\', bottom: \'50px\', scrollIndicator: "none", // 当你的界面的内容足够多的时候,会出现滚动条,这个是隐藏滚动条 }; var status = 1; // window.addEventListener(\'die\',function(){ //status = 0; // }) // window.addEventListener(\'live\',function(){ //status = 1; // }) //创建子页面,首个选项卡页面显示,其它均隐藏; mui.plusReady(function() { // 返回桌面 var oldback = mui.back; mui.back = function() { var main = plus.android.runtimeMainActivity(); main.moveTaskToBack(false); }; //获得当前页面 var self = plus.webview.currentWebview(); //循环创建子页面 for (var i = 0; i < subpages.length; i++) { console.log(\'111111111111=======》\',subpages[i] + \'subpage_style===> \'+ subpage_style) var sub = plus.webview.create(subpages[i], subpages[i], subpage_style); if (i > 0) { sub.hide(); } self.append(sub); } //当前激活选项卡 var activeTab = subpages[0]; //选项卡点击事件mui(\'.mui-bar-tab\').on(\'tap\', \'.aa\', function(e) { if(status == 0){ return false; } var targetTab = this.getAttribute(\'href\'); if (targetTab == activeTab) { return; } console.log(\'当前显示哪一个tab页面\') console.log(targetTab) // console.log(\'targetTab\'+targetTab)//隐藏当前; plus.webview.hide(activeTab); //显示目标选项卡 detailPage = plus.webview.getWebviewById(targetTab); //触发详情页面的newsId事件 mui.fire(detailPage,\'newsId\'); //打开详情页面 mui.openWindow({ id:targetTab }); // plus.webview.show(targetTab); //更改当前活跃的选项卡 activeTab = targetTab; tabChange(subpages.indexOf(targetTab)); }); function tabChange(index) { mui(\'.mui-tab-label\').each(function(i, a){ if (i === index) { a.style.color = \'#358dfd\' } else { a.style.color = \'#7A7E83\' } }) mui(\'.tab-icon\').each(function(i, a) { if (i === index) { a.src = https://www.songbingjia.com/'img/diImg/\' + a.dataset.icon + \'Blue.png\' } else { a.src = https://www.songbingjia.com/'img/diImg/\' + a.dataset.icon + \'Gray.png\' } }) }}); < /script> < /html>
homePage.html:首页,因为首页有每次进入刷新的需求
window.addEventListener(\'newsId\',function(event){ window.location.reload(); //页面更新 });
具体操作如下图:
文章图片
文章图片
【muiapp中如何实现每次tab切换都刷新页面】 亲测可用,如果你也遇到同样是问题,可以采用以下:详细参考:https://dev.dcloud.net.cn/mui/event/#customevent
推荐阅读
- HttpApplication处理对象与HttpModule处理模块
- android 系统裁剪 ?
- 使用Android studio 离线打包uniapp
- Scala抽象类介绍和用法示例
- Scala继承图解和用法示例
- Scala this关键字用法示例详解
- Scala如何使用单例对象和伴随对象()
- Scala方法覆盖图解和用法示例
- Scala对象和类解释和用法示例详解