H5移动端开发Webview模式选项卡下实现滑屏切换与点击tap切换

一、前言

        最近利用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选项卡切换。

四、代码实现

1. 主窗口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窗口中添加子窗口
         }
   
      });

2. 第一个子窗口中实现左右滑屏手势操作（滑至第二个子窗口后可返回第一个子窗口）

   //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
   		          });						
   		     }			
         });
   })；

3. 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;							
   				}
   			}
   		}
   	});

    

转载于:https://my.oschina.net/dalsen/blog/1519158