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

主窗口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

//创建子窗口,参数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

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;

}

}

}

});