用mui写的原生tab以及选项卡页面的拖动效果

废话少说上代码！

1、首先我们创建原生的tab选项，目前这个很容易实现，在hbuilder中新建项目选中移动app模板选择



tab的配置项很简单官网有教程http://ask.dcloud.net.cn/article/12602

注意配置tags 时每个tags的id 要具有唯一性，配置图标的时候图标的代码要是Unicode 这个在官方文档里也有介绍就不多说了，有问题留言给我，下面是我的配置项。我配了五个按钮，把中间的凸起去掉了，每个宽度都是20%；去中间凸起要到你的入口界面中配置。

"launchwebview": {
"bottom": "0px",
"background": "#fff",
"subNViews": [
{
"id": "tabBar",
"styles": {
"bottom": "0px",
"left": "0",
"height": "50px",
"width": "100%",
"backgroundColor": "#fff"
},
"tags": [
{
"tag": "font",
"id": "indexIcon",
"text": "\ue605",
"position": {
"top": "4px",
"left": "0",
"width": "20%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/ali_icon/iconfont.ttf",
"align": "center",
"size": "24px"
}
}, {
"tag": "font",
"id": "indexText",
"text": "首页",
"position": {
"top": "23px",
"left": "0",
"width": "20%",
"height": "24px"
},
"textStyles": {
"align": "center",
"size": "10px"
}
},{
"tag": "font",
"id": "teamIcon",
"text": "\ue65d",
"position": {
"top": "4px",
"left": "20%",
"width": "20%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/ali_icon/iconfont.ttf",
"align": "center",
"size": "24px"
}
}, {
"tag": "font",
"id": "teamText",
"text": "团队",
"position": {
"top": "23px",
"left": "20%",
"width": "20%",
"height": "24px"
},
"textStyles": {
"align": "center",
"size": "10px"
}
},{
"tag": "font",
"id": "newsIcon",
"text": "\ue606",
"position": {
"top": "4px",
"left": "40%",
"width": "20%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/ali_icon/iconfont.ttf",
"align": "center",
"size": "24px"
}
}, {
"tag": "font",
"id": "newsText",
"text": "消息",
"position": {
"top": "24px",
"left": "40%",
"width": "20%",
"height": "24px"
},
"textStyles": {
"align": "center",
"size": "10px"
}
},{
"tag": "font",
"id": "accountIcon",
"text": "\ue609",
"position": {
"top": "4px",
"left": "60%",
"width": "20%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/ali_icon/iconfont.ttf",
"align": "center",
"size": "24px"
}
}, {
"tag": "font",
"id": "accountText",
"text": "账户",
"position": {
"top": "24px",
"left": "60%",
"width": "20%",
"height": "24px"
},
"textStyles": {
"align": "center",
"size": "10px"
}
},{
"tag": "font",
"id": "settingIcon",
"text": "\ue626",
"position": {
"top": "4px",
"left": "80%",
"width": "20%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/ali_icon/iconfont.ttf",
"align": "center",
"size": "24px"
}
}, {
"tag": "font",
"id": "settingText",
"text": "设置",
"position": {
"top": "23px",
"left": "80%",
"width": "20%",
"height": "24px"
},
"textStyles": {
"align": "center",
"size": "10px"
}
},
{
"tag": "rect",
"id": "tabBorder",
"position": {
"top": "0",
"left": "0",
"width": "100%",
"height": "1px"
},
"rectStyles": {
"color": "#ccc"
}
}
]
}
]
}

新建五个页面，我是直接把我项目删减了一下所以我的页面是有文件夹层次的

这个是入口页面的代码main.html

(function() {
//初始化的时候创建了五个页面，他们都显示，只是left位置不一样，你可以想象成五个页面并排排列
mui.init({
swipeBack: true, //启用右滑关闭功能
subpages: [{
url: "main_index/main_index.html",
id: "main_index.html",
styles: {
left: '0px',
top: '45px',
bottom: '51px'
}
}, {
url: "main_team/main_team.html",
id: "main_team.html",
styles: {
left: '100%',
top: '45px',
bottom: '51px'
}
},
{
url: "main_chat/main_chat.html",
id: "main_chat.html",
styles: {
left: '200%',
top: '45px',
bottom: '51px'
}
},
{
url: "main_account/main_account.html",
id: "main_account.html",
styles: {
left: '300%',
top: '45px',
bottom: '51px'
}
},
{
url: "main_more/main_more.html",
id: "main_more.html",
styles: {
left: '400%',
top: '45px',
bottom: <
bfd0
span class="hljs-string">'51px'
}
}
]
});
var as = "pop-in";
mui.plusReady(function() {
var self = plus.webview.currentWebview(); // 当前页面

var aniShow = {};
util.initSubpage(aniShow);
var nview = plus.nativeObj.View.getViewById('tabBar'),
activePage = plus.webview.currentWebview(),
targetPage,
subpages = util.options.subpages,
pageW = window.innerWidth,
currIndex = 0;

/**
* 根据判断view控件点击位置判断切换的tab
*/
//根据点击位置判断点击的是哪个按钮
nview.addEventListener('click', function(e) {
var clientX = e.clientX;
if(clientX > 0 && clientX <= parseInt(pageW * 0.2)) {
currIndex = 1;
} else if(clientX > parseInt(pageW * 0.2) && clientX <= parseInt(pageW * 0.4)) {
currIndex = 2;
} else if(clientX > parseInt(pageW * 0.4) && clientX <= parseInt(pageW * 0.6)) {
currIndex = 3;
} else if(clientX > parseInt(pageW * 0.6) && clientX <= parseInt(pageW * 0.8)) {
currIndex = 4;
} else {
currIndex = 5;
}
// 匹配对应tab窗口
changeSub(currIndex)
//底部选项卡切换，这个是调用的util.js的方法
util.toggleNview(currIndex - 1);
//更新当前活跃的页面
activePage = targetPage;
});

function changeSub(index) {
var sub1 = plus.webview.getWebviewById("main_index.html");
var sub2 = plus.webview.getWebviewById("main_team.html");
var sub3 = plus.webview.getWebviewById("main_chat.html");
var sub4 = plus.webview.getWebviewById("main_account.html");
var sub5 = plus.webview.getWebviewById("main_more.html");
console.log(JSON.stringify(sub1.getStyle()));
//这里获取每个页面的当前位置
var sub1From = sub1.getStyle().left;
var sub2From = sub2.getStyle().left;
var sub3From = sub3.getStyle().left;
var sub4From = sub4.getStyle().left;
var sub5From = sub5.getStyle().left;

//这里根据点击时传入的值判断各个页面新的位置
var sub1To = (1 - index) * 100 + "%";
var sub2To = (2 - index) * 100 + "%";
var sub3To = (3 - index) * 100 + "%";
var sub4To = (4 - index) * 100 + "%";
var sub5To = (5 - index) * 100 + "%";
console.log("从" + sub1From + "去" + sub1To);
console.log("从" + sub2From + "去" + sub2To);
console.log("从" + sub3From + "去" + sub3To);
console.log("从" + sub4From + "去" + sub4To);
console.log("从" + sub5From + "去" + sub5To);
//plus.webview.startAnimation 这个方法只能关联两个或一个窗口，所以我用了三个，每个方法中的第一个'view'都是主界面，必须填; ‘fromLeft’:value,'toLeft':value;
//这样配置完以后就可以实现点击切换选项卡界面的动画效果了
plus.webview.startAnimation({
'view': sub1,
'styles': {
'fromLeft': sub1From,
'toLeft': sub1To
},
'action': 'show'
}, {
'view': sub2,
'styles': {
'fromLeft': sub2From,
'toLeft': sub2To
},
'action': 'show'
},
function(e) {

}.bind(this)
)

plus.webview.startAnimation({
'view': sub3,
'styles': {
'fromLeft': sub3From,
'toLeft': sub3To
},
'action': 'show'
}, {
'view': sub4,
'styles': {
'fromLeft': sub4From,
'toLeft': sub4To
},
'action': 'show'
},
function(e) {

}.bind(this)
)
plus.webview.startAnimation({
'view': sub5,
'styles': {
'fromLeft': sub5From,
'toLeft': sub5To
},
'action': 'show'
},
function(e) {

}.bind(this)
)
}
});
})();

下面我们来看拖动页面切换选项卡界面

mui.init()
//这里我只写一个页面的拖动方法
//_self 自身页面
//_next 当前页面的下一个页面
//_prev 当前页面的上一个页面
//nowLeft 页面拖动前的位置
//e0ndLeft 页面拖动结束后的位置
var _self, _next, _prev, nowLeft, endLeft;
mui.plusReady(function() {

_self = plus.webview.currentWebview();
_next = plus.webview.getWebviewById("main_account.html");
_prev = plus.webview.getWebviewById("main_team.html");
_index = plus.webview.getLaunchWebview();
_self.drag({
direction: "left",
moveMode: "followFinger"
}, {
view: _next,
moveMode: 'follow'
}, function(e) {
//注意这个回调函数会随着你拖动的变化而变化，一共有三个事件，开始，拖动，结束
if(e.type == "start") {
nowLeft = _self.getStyle().left;
//这里当拖动开始时获取此页面当前的位置
}
if(e.type == "end") {
//拖动结束后获取此页面的位置
endLeft = _self.getStyle().left;
if(nowLeft != endLeft) {//如果两个位置不一样则说明拖动成功了，我们向主页面也就是tab选项卡所在的页面发送一条命令_index.evalJS("util.toggleNview(3)");这个传的 3 是相对应的第几个选项按钮这个函数在util.js里是改变选项按钮状态的
_index.evalJS("util.toggleNview(3)");
}
}
});
_self.drag({
direction: "right",
moveMode: "followFinger"
}, {
view: _prev,
moveMode: 'follow'
}, function(e) {
if(e.type == "start") {
nowLeft = _self.getStyle().left;
}
if(e.type == "end") {
endLeft = _self.getStyle().left;
if(nowLeft != endLeft) {
_index.evalJS("util.toggleNview(1)");
}
}
});
})

至此拖动页面切换选项卡界面就实现了，有问题欢迎留言