webAPP踩坑記錄
阿新 • • 發佈:2017-12-25
creat radi item nac api margin inter 側滑菜單 bind
最近公司突然給我們下了一個任務 一個星期要做出一個系統網站 外加手機app 2個同事負責 web開發 我負責手機app 的開發
今天終於初級版本做完了,記錄一下手機app踩過的坑與優化之路
用到技術 mui+vue.js+webApi
首先是側滑菜單欄 類似於qq側滑
1 <!-- 主界面不動、菜單移動 --> 2 <!-- 側滑導航根容器 --> 3 <div class="mui-off-canvas-wrap mui-draggable mui-slide-in"> 4 <!-- 菜單容器 --> 5 <aside class="mui-off-canvas-left" id="offCanvasSide"> 6 <div class="mui-scroll-wrapper"> 7 <div class="mui-scroll"> 8 <!-- 菜單具體展示內容 --> 9 10 </div> 11 </div> 12 </aside> 13 <!-- 主頁面容器 --> 14 <div class="mui-inner-wrap"> 15 <!-- 主頁面標題 --> 16 <header class="mui-bar mui-bar-nav"> 17 <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a> 18 <h1 class="mui-title">標題</h1> 19 </header> 20 <nav class="mui-bar mui-bar-tab"> 21 <a class="mui-tab-item mui-active"> 22 <span class="mui-icon mui-icon-home"></span> 23 <span class="mui-tab-label">首頁</span> 24 </a> 25 <a class="mui-tab-item"> 26 <span class="mui-icon mui-icon-phone"></span> 27 <span class="mui-tab-label">電話</span> 28 </a> 29 <a class="mui-tab-item"> 30 <span class="mui-icon mui-icon-email"></span> 31 <span class="mui-tab-label">郵件</span> 32 </a> 33 <a class="mui-tab-item"> 34 <span class="mui-icon mui-icon-gear"></span> 35 <span class="mui-tab-label">設置</span> 36 </a> 37 </nav> 38 <div class="mui-content mui-scroll-wrapper"> 39 <div class="mui-scroll"> 40 <!-- 主界面具體展示內容 --> 41 42 </div> 43 </div> 44 <div class="mui-off-canvas-backdrop"></div> 45 </div> 46 </div>View Code 快捷鍵 moff
第二個底部菜單 webview模式
<!--描述:底部導航-->
<nav class="mui-bar mui-bar-tab">
<template v-for="(tab,index) in navTabs">
<a class="mui-tab-item" :class="index==tabIndex?‘mui-active‘:‘‘" @tap="showView(index,tab)" >
<span class="mui-icon " :class="index==tabIndex?tab.iconActive:tab.icon"></span>
<span class="mui-tab-label">{{tab.name}}</span>
</a>
</template>
</nav>
View Code 1 //選項卡頁面對象
2 var barItemArray = [{
3 id: ‘material‘,
4 name: ‘材料‘,
5 url: ‘../../water/material/index.html‘,
6 tips: 0,
7 icon: ‘icon-cailiao‘,
8 iconActive:‘icon-cailiaoActive‘
9 },
10 {
11 id: ‘parts‘,
12 name: ‘部件‘,
13 url: ‘../../water/parts/index.html‘,
14 tips: 0,
15 icon: ‘icon-bujian‘,
16 iconActive:‘icon-bujianActive‘
17 },
18 {
19 id: ‘production‘,
20 name: ‘生產作業‘,
21 url: ‘../../water/production/index.html‘,
22 tips: 0,
23 icon: ‘icon-zuoye‘,
24 iconActive:‘icon-zuoyeActive‘
25 },
26 {
27 id: ‘inspection‘,
28 name: ‘檢驗‘,
29 url: ‘../../water/inspection/index.html‘,
30 tips: 0,
31 icon: ‘icon-jianyan‘,
32 iconActive:‘icon-jianyanActive‘
33 }
34 ];
View Code
_selfView = plus.webview.currentWebview()
/*設置導航條的高度*/
var style1 = {
popGesture: ‘none‘,
top: 20,
bottom: 0
};
var params = {
projectId: _selfView.projectId,
projTypeId: _selfView.projTypeId,
}
_selfView.setStyle(style1);
for(var i in barItemArray) {
var sub = null;
var bar = barItemArray[i];
if(mui.os.ios) { //兼容ios
//創建新的webview頁面
sub = plus.webview.create(barItemArray[i].url,
barItemArray[i].id,
style1,
params);
} else if(mui.os.android) {//兼容android
//創建新的webview頁面
sub = plus.webview.create(barItemArray[i].url,
barItemArray[i].id, {
top: ‘44px‘,
bottom: ‘65px‘,
bounce: ‘vertical‘,
},
params);
plus.webview.hide(barItemArray[i].id);
}
if(sub) {
_selfView.append(sub);
}
}
//默認顯示第一個頁面
plus.webview.show(barItemArray[0].id);
下拉刷新 ios 和android 也有差異
1 if(mui.os.android) { //如果是安卓 下拉刷新
2 _selfView.setPullToRefresh({
3 support: true,
4 height: ‘50px‘,
5 range: ‘100px‘,
6 style: ‘circle‘,
7 offset: ‘1px‘
8 }, loadDownData);
9 }
10 if(mui.os.android) { //如果是安卓
11 //結束刷新
12 _selfView.endPullToRefresh();
13 }
webAPP踩坑記錄