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选项卡切换。

四、代码实现

主窗口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',{

7fe0
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;
}
}
}
});