一、前言
最近利用HBuilder结合mui框架以及H5+接口开发一个APP,开发过程中因需求的改变需要做一个多个Webview窗口间滑屏切换的功能。虽然mui框架封装了 swipe手势事件,但实现起来会发现需要解决事件冒泡的问题同时会影响scroll的行为,那么H5+中提供的WebviewObject.drag方法是切换Webview窗口最佳的选择。
二、视图组织
主窗口:Home.html
子窗口:sub_first.html,sub_second.html,sub_third.html,sub_fourth.html
三、实现功能:在主窗口Home.html中实现四个子窗口的滑屏切换以及点击底部webview选项卡切换。
四、代码实现
- 主窗口Home.html中创建四个子窗口
//Home.html mui.plusReady({ //窗口名称 var subpages = ['sub_first.html', 'sub_second.html', 'sub_third.html', 'sub_fourth.html']; //每个窗口对应的style,top与bottom的值用于为顶部栏及底部栏预留位置 var subpage_style = [ { //第一个窗口默认显示 top: '50px', bottom: '50px' }, { //第二个窗口设置left为100%,用以将不显示的窗口藏在手机屏幕之外,余下窗口以此类推. left:'100%', top: '50px', bottom: '50px' }, { left:'200%', top: '50px', bottom: '50px' }, { left:'300%', top: '50px', bottom: '50px' } ]; /*创建子窗口*/ var self = plus.webview.currentWebview(); //获取当前webview窗口对象 for(var i=0 ; i<subpages.length ; i++){ //创建子窗口,参数1为html网页地址,可支持网络地址与本地地址;参数2为窗口的标识;参数3为窗口样式 var sub_view = plus.webview.create(subpages[i], subpages[i], subpage_style[i]); self.append(sub); //在Webview窗口中添加子窗口 } });
-
第一个子窗口中实现左右滑屏手势操作(滑至第二个子窗口后可返回第一个子窗口)
//sub_first.html mui.plusReady({ var homepage = plus.webview.getTopWebview(); //获取应用显示栈顶的WebviewObject窗口对象,即Home.html var curr_view = plus.webview.currentWebview(); //获取当前页面的webview对象 var second_view = plus.webview.getWebviewById('sub_second.html'); //获取第二个子窗口对象 // 左滑显示新窗口 curr_view.drag( { direction:'left', //滑动方向 moveMode:'followFinger' //窗口跟随手指滑动 }, { view:second_view, //滑动至第二个子窗口 moveMode:'follow' }, function(e){ if(e.result === true){ //判断滑动是否成功滑至第二个子窗口 //向Home.html触发事件,改变顶部标题以及被选中的底部Tab mui.fire(homepage,'changeView',{ item : 0, //页面标识,第一个子窗口标识为0 以此类推 direction : 'left', itemName:curr_view.id }); } }); //右滑隐藏新窗口,返回第一个子窗口 second_view.drag( { direction:'right', moveMode:'followFinger' }, { view:curr_view, moveMode:'follow' }, function(e){ if(e.result === true){ mui.fire(homepage,'changeView',{ item : 1, direction : 'right', itemName:second_view.id }); } }); });
-
Home.html当用户点击底部Tap时对Webview进行切换。(思路就是对当前点击的Tap对应的webview显示在当前屏幕,在此webview前的则修改其style排列在左边或右边)
mui('.mui-bar-tab').on('tap', 'a', function(e) { var targetTab = this.getAttribute('href'); //更换标题 title.innerHTML = this.querySelector('.mui-tab-label').innerHTML; var curr = plus.webview.getWebviewById(targetTab); curr.setStyle({left:'0px'}); //点击当前的选项卡将其移至屏幕中显示 for(var i=0;i<subpages.length;i++){ if(targetTab === subpages[i]){ var num1 = 100; var num2 = -100; for(var j = i+1 ; j<4 ;j++){ //在该webview之后的页面基于本页面右移 console.log('位移'); var other = plus.webview.getWebviewById(subpages[j]); other.setStyle({left: num1+'%'}); num1+=100; } for(var k = i-1 ; k>0 ;k--){ //在该webview之前的页面基于本页面左移 console.log('位移'); var other = plus.webview.getWebviewById(subpages[k]); other.setStyle({left: num2+'%'}); num2-=100; } } } });