初始化bar页面和选项卡点击监听

2017-09-13 20:33:11来源:CSDN作者:sophiafei_2000人点击

分享

例一代码段:

var barItemWebviewArray = [];var title = document.getElementById("title");mainWebview = plus.webview.currentWebview();//获取当前窗口的WebviewObject对象var subpages = ['carNoInquiry.html','planNoInquiry.html','mine.html'];var subpage_style = {//除扫码外各个bar子页面显示格式top: '45px',bottom: '51px',left: '0px',bounce: 'vertical',bounceBackground: '#f8f8f8'};inittabitemWebviews(subpages);//初始化bar页面////初始化bar页面,首个选项卡页面显示,其它均隐藏;function inittabitemWebviews(pages) {for (var i = 0; i < 3; i++) {barItemWebviewArray[i] = mui.preload({id: pages[i],url: pages[i],styles: subpage_style,waiting: {autoShow: false}});barItemWebviewArray[i].hide();mainWebview.append(barItemWebviewArray[i]);}barItemWebviewArray[0].show();curBarItemWebview = barItemWebviewArray[0];}//选项卡点击事件			function tapBaritem() {mui('.mui-bar-tab').on('tap', 'a', function(e) {					var targetTab = this.getAttribute('href');					//mui.toast(targetTab);					if (targetTab == activeTab) {						return;					}					//更换标题									title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;					//隐藏当前;					plus.webview.hide(activeTab);					//更改当前活跃的选项卡					activeTab = targetTab;					//显示目标选项卡					//若为iOS平台或非首次显示,则直接显示					if(mui.os.ios||aniShow[targetTab]){						plus.webview.show(targetTab);					}else{						//否则,使用fade-in动画,且保存变量						var temp = {};						temp[targetTab] = "true";						mui.extend(aniShow,temp);						plus.webview.show(targetTab,"fade-in",300);					}				});			}


例二代码段:

var mainWebView; //当前主webviewvar navtitle;var curTabItem; //当前被选中tabitemvar barItemUrl = ['baritemHtml/home.html', 'baritemHtml/category.html', 'baritemHtml/xinyuandan.html', 'baritemHtml/cart.html', 'baritemHtml/mine.html'];var barItemWebView = {}; //每个tabitem所对应显示的页面对象navtitle = document.getElementById('nav-title');mainWebView = plus.webview.currentWebview(); //初始化每个tabitem所对应的页面		function inittabitemWebviews() {			for (var i = 0; i < barItemUrl.length; i++) {				barItemWebView[i] = mui.preload({					url: barItemUrl[i],					id: barItemUrl[i],					styles: {						top: '44px',						bottom: '51px',						left: '0px',						bounce: 'vertical',						bounceBackground: '#DCDCDC'					},					waiting: {		   				autoShow: false		   			}				});//				if (i != 0) {					barItemWebView[i].hide();//				}				mainWebView.append(barItemWebView[i]);			}						barItemWebView[0].show();		}		//为每个tabitem添加监听		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'));			});		}				//设置webview的切换显示的函数		function showCurWebView(href) {			var index = 0;			for (var i = 0; i < barItemUrl.length; i++) {				if (href == barItemUrl[i]) {					index = i;				} else {					barItemWebView[i].hide();				}			}			barItemWebView[index].show();		}		


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台