MUI框架-12-使用原生底部選項卡（凸出圖標案例）
MUI框架-12-使用原生底部選項卡（凸出圖標案例）
今天，用 mui 作 app 時，遇到了可能各位都遇到過的頭疼問題：底部中間圖標凸起，以下圖：
javascript
最後有源代碼css
【提示】：有人問我在 HBuilder 中看不到底部欄，請不要慌，代碼沒有問題，在模擬器或者真機運行纔會有，原生，原生。html
一、mainifest.json代碼修改以下，主要就是將官方 mui tab 底部凸起案例的字體圖標換成了圖片：java
"launchwebview": {
"bottom": "0px",
"background": "#fff",
"subNViews": [
{
"id": "tabBar",
"styles": {
"bottom": "0px",
"left": "0",
"height": "50px",
"width": "100%",
"backgroundColor": "#fff"
},
"tags": [
{
"tag": "img",
"id": "homeIcon",
"src": "images/home_nor.png",
"position": {
"top": "4px",
"left": "10%",
"width": "25px",
"height": "40px"
}
},{
"tag": "img",
"id": "scheduleIcon",
"src": "images/schedule_nor.png",
"position": {
"top": "4px",
"left": "30%",
"width": "25px",
"height": "40px"
}
},{
"tag": "img",
"id": "goodsIcon",
"src": "images/goods_nor.png",
"position": {
"top": "4px",
"left": "65%",
"width": "25px",
"height": "40px"
}
},{
"tag": "img",
"id": "mineIcon",
"src": "images/mine_nor.png",
"position": {
"top": "4px",
"left": "85%",
"width": "25px",
"height": "40px"
}
}
]
}
]
}
二、util.js代碼修改以下（主要將字體顏色配置都換成了圖片，而且將subpages變成了對象數組，增長了id和url字段，這樣更加符合實際需求，新增了首頁，而且初始化顯示第一頁）：android
var util = {
options: {
ACTIVE_SRC1: "images/home_click.png",
NORMAL_SRC1: "images/home_nor.png",
ACTIVE_SRC2: "images/schedule_click.png",
NORMAL_SRC2: "images/schedule_nor.png",
ACTIVE_SRC3: "images/goods_click.png",
NORMAL_SRC3: "images/goods_nor.png",
ACTIVE_SRC4: "images/mine_click.png",
NORMAL_SRC4: "images/mine_nor.png",
subpages: [{
url : 'pages/home.html',
id : 'home'
},{
url : 'pages/schedule.html',
id : 'schedule'
},{
url : 'pages/goods.html',
id : 'goods'
},{
url : 'pages/mine.html',
id : 'mine'
},]
},
/**
* 簡單封裝了繪製原生view控件的方法
* 繪製內容支持font（文本，字體圖標）,圖片img , 矩形區域rect
*/
drawNative: function(id, styles, tags) {
var view = new plus.nativeObj.View(id, styles, tags);
return view;
},
/**
* 初始化首個tab窗口 和 建立子webview窗口
*/
initSubpage: function(aniShow) {
var subpage_style = {
top: 0,
bottom: 51
},
subpages = util.options.subpages,
self = plus.webview.currentWebview(),
temp = {};
//兼容安卓上添加titleNView 和 設置沉浸式模式會遮蓋子webview內容
if(mui.os.android) {
if(plus.navigator.isImmersedStatusbar()) {
subpage_style.top += plus.navigator.getStatusbarHeight();
}
if(self.getTitleNView()) {
subpage_style.top += 40;
}
}
// 初始化第一個tab項爲首次顯示
temp[self.id] = "true";
mui.extend(aniShow, temp);
// 初始化繪製首個tab按鈕
util.toggleNview(0);
//預加載全部子頁面
for(var i = 0, len = subpages.length; i < len; i++) {
if(!plus.webview.getWebviewById(subpages[i].id)) {
var sub = plus.webview.create(subpages[i].url, subpages[i].id, subpage_style);
//初始化隱藏
sub.hide();
// append到當前父webview
self.append(sub);
}
}
//初始化顯示第一個子頁面
plus.webview.show(plus.webview.getWebviewById(subpages[0].id));
},
/**
* 點擊切換tab窗口
*/
changeSubpage: function(targetPage, activePage, aniShow) {
//若爲iOS平臺或非首次顯示，則直接顯示
if(mui.os.ios || aniShow[targetPage]) {
plus.webview.show(targetPage);
} else {
//不然，使用fade-in動畫，且保存變量
var temp = {};
temp[targetPage] = "true";
mui.extend(aniShow, temp);
plus.webview.show(targetPage, "fade-in", 300);
}
//隱藏當前 除了第一個父窗口
if(activePage !== plus.webview.getLaunchWebview()) {
plus.webview.hide(activePage);
}
},
/**
* 點擊重繪底部tab （view控件）
*/
toggleNview: function(currIndex) {
// 重繪當前tag 包括icon和text，因此執行兩個重繪操做
switch(currIndex){
case 0 :
util.updateSubNView(0, util.options.ACTIVE_SRC1);
util.updateSubNView(1, util.options.NORMAL_SRC2);
util.updateSubNView(2, util.options.NORMAL_SRC3);
util.updateSubNView(3, util.options.NORMAL_SRC4);
break;
case 1 :
util.updateSubNView(0, util.options.NORMAL_SRC1);
util.updateSubNView(1, util.options.ACTIVE_SRC2);
util.updateSubNView(2, util.options.NORMAL_SRC3);
util.updateSubNView(3, util.options.NORMAL_SRC4);
break;
case 2 :
util.updateSubNView(0, util.options.NORMAL_SRC1);
util.updateSubNView(1, util.options.NORMAL_SRC2);
util.updateSubNView(2, util.options.ACTIVE_SRC3);
util.updateSubNView(3, util.options.NORMAL_SRC4);
break;
case 3 :
util.updateSubNView(0, util.options.NORMAL_SRC1);
util.updateSubNView(1, util.options.NORMAL_SRC2);
util.updateSubNView(2, util.options.NORMAL_SRC3);
util.updateSubNView(3, util.options.ACTIVE_SRC4);
break;
}
},
/*
* 利用 plus.nativeObj.View 提供的 drawBitmap 方法更新 view 控件
*/
updateSubNView: function(currIndex, src) {
var self = plus.webview.currentWebview(),
nviewEvent = plus.nativeObj.View.getViewById("tabBar"), // 獲取nview控件對象
nviewObj = self.getStyle().subNViews[0], // 獲取nview對象的屬性
currTag = nviewObj.tags[currIndex]; // 獲取當前需重繪的tag
nviewEvent.drawBitmap(src,'',currTag.position, currTag.id);
}
};
三、index.html代碼修改以下(主要將中間凸起的效果有原來的字體圖標改爲了圖片)：ios
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>首頁</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<style>
html,
body {
background-color: #efeff4;
}
.title {
margin: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
padding-bottom: 51px;
}
</style>
</head>
<body>
<script src="js/util.js"></script>
<script type="text/javascript">
(function() {
mui.init({
swipeBack: true //啓用右滑關閉功能
});
mui.plusReady(function() {
var self = plus.webview.currentWebview(),
leftPos = Math.ceil((window.innerWidth - 60) / 2); // 設置凸起大圖標爲水平居中
/**
* drawNativeIcon 繪製凸起圓，
* 實現原理：
* id爲bg的tag 建立帶邊框的圓
* id爲bg2的tag 建立白色矩形遮住圓下半部分，只顯示凸起帶邊框部分
* id爲iconBg的紅色背景圖
* id爲icon的字體圖標
* 注意建立前後順序，建立越晚的層級越高
*/
var drawNativeIcon = util.drawNative('icon', {
bottom: '5px',
left: leftPos + 'px',
width: '60px',
height: '60px'
}, [{
tag: 'rect',
id: 'bg',
position: {
top: '1px',
left: '0px',
width: '100%',
height: '100%'
},
rectStyles: {
color: '#fff',
radius: '50%',
borderColor: '#ccc',
borderWidth: '1px'
}
}, {
tag: 'rect',
id: 'bg2',
position: {
bottom: '-0.5px',
left: '0px',
width: '100%',
height: '45px'
},
rectStyles: {
color: '#fff'
}
}, {
tag: 'rect',
id: 'iconBg',
position: {
top: '5px',
left: '5px',
width: '50px',
height: '50px'
},
rectStyles: {
color: '#0ab88e',
radius: '50%'
}
}, {
tag: 'img',
id: 'icon',
position: {
top: '15px',
left: '15px',
width: '30px',
height: '30px'
},
src: 'images/icon_scan.png'
}]);
// 將繪製的凸起 append 到父webview中
self.append(drawNativeIcon);
//凸起圓的點擊事件
var active_color = '#fff';
drawNativeIcon.addEventListener('click', function(e) {
mui.openWindow({
id: 'scan',
url: 'pages/scan.html'
})
});
// 中間凸起圖標繪製及監聽點擊 完畢
// 建立子webview窗口 並初始化
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.25)) {
currIndex = 0;
} else if(clientX > parseInt(pageW * 0.25) && clientX <= parseInt(pageW * 0.45)) {
currIndex = 1;
} else if(clientX > parseInt(pageW * 0.45) && clientX <= parseInt(pageW * 0.8)) {
currIndex = 2;
} else {
currIndex = 3;
}
// 匹配對應tab窗口
if(plus.webview.getWebviewById(subpages[currIndex].id) == plus.webview.currentWebview()) {
return;
} else {
targetPage = plus.webview.getWebviewById(subpages[currIndex].id);
}
//底部選項卡切換
util.toggleNview(currIndex);
// 子頁面切換
util.changeSubpage(targetPage, activePage, aniShow);
//更新當前活躍的頁面
activePage = targetPage;
});
});
})();
</script>
</body>
</html>
源碼下載地址：
更多文章：
相關文章
- 1. mui APP tab選項卡底部凸出圖標解決實例
- 2. mui底部選項卡切換頁面
- 3. mui 選項卡
- 4. mui選項卡
- 5. MUI框架：移動端底部固定mui-bar-tab佈局 - 案例篇
- 6. 選項卡案例
- 7. 案例20-選項卡套選項卡
- 8. 使用原生js實現選項卡功能實例教程
- 9. Vue選項卡案例
- 10. js選項卡案例詳情（原生js）
- 更多相關文章...
- • ionic tab(選項卡) - ionic 教程
- • ionic 選項卡欄操作 - ionic 教程
- • Java Agent入門實戰（三）-JVM Attach原理與使用
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. mui APP tab選項卡底部凸出圖標解決實例
- 2. mui底部選項卡切換頁面
- 3. mui 選項卡
- 4. mui選項卡
- 5. MUI框架：移動端底部固定mui-bar-tab佈局 - 案例篇
- 6. 選項卡案例
- 7. 案例20-選項卡套選項卡
- 8. 使用原生js實現選項卡功能實例教程
- 9. Vue選項卡案例
- 10. js選項卡案例詳情（原生js）