webAPP踩坑記錄

標籤：template   res   tabs   drag   oid   top   margin   alt   self   

   最近公司突然給我們下了一個任務  一個星期要做出一個系統網站 外加手機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踩坑記錄