页面操作全部采用调用函数方法实现（包括监听事件）

最新推荐文章于 2023-04-17 16:50:59 发布

原创最新推荐文章于 2023-04-17 16:50:59 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML #Javascript #MUI #手机

页面基础编程专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个基于MUI框架的移动端应用中如何通过JavaScript实现Tab导航栏的点击监听及页面间的切换效果，包括状态栏颜色修改、登录状态判断、初始化页面及事件绑定等关键步骤。

mui.plusReady(function() {
			
			//改变statusbar
			plus.navigator.setStatusBarBackground('#41cea9');
			navtitle = document.getElementById('nav-title');
			mainWebView = plus.webview.currentWebview();
			//判断是否已经登陆,若没有登陆将预加载登陆页面，知道登陆成功为止close登陆页面
			judgelogin();
			//初始化商品详情页面。
			initProductDetail();
			//初始化页面,
			inittabitemWebviews();
			//为每个bar－item添加点击事件
			addEventForTabitem();
			//接收自定义的事件页面切换
			changeWebViewEvent();
			
		});

例如其中选项卡点击监听也用函数来实现

function addEventForTabitem() {
			mui('.mui-bar-tab').on('tap', '.mui-tab-item', function() {
				var tabitem = this;
				if (tabitem == curTabItem) {
					return;
				}
				curTabItem = tabitem;
				navtitle.innerText = tabitem.children[tabitem.children.length - 1].innerText;
				//设置将显示当前webview
				showCurWebView(tabitem.getAttribute('href'));
			});
		}