WebApp Pit Record

Recently, the company suddenly gave us a mission. One weeks to make a system website plus a mobile app 2 colleagues responsible for Web development I am responsible for the development of mobile app

Today, finally, the primary version is finished, recording the mobile app has stepped on the pit and optimize the road

Using the technical Mui+vue.js+webapi

the first is the side-slip menu bar similar to QQ slide

1 <!--main interface fixed, menu moved--2 <!--slide navigation root container--3 <div class= "Mui-off-canvas-wrap mui-draggable mu              I-slide-in > 4 <!--menu Container--5 <aside class= "Mui-off-canvas-left" id= "Offcanvasside" > 6 <div class= "Mui-scroll-wrapper" > 7 <div class= "Mui-scroll" > 8 <!            --Menu Display Content--9 </div>11 </div>12 </aside>13             <!--home facial-->14 <div class= "Mui-inner-wrap" >15 <!--Main Page title-->16 

View Codeshortcut key Moff

Second bottom menu WebView mode

<!--Description: Bottom navigation -            <navclass= "Mui-bar mui-bar-tab">                <Templatev-for= "(Tab,index) in Navtabs">                    <aclass= "Mui-tab-item": Class= "Index==tabindex?" Mui-active ': ' "@tap= "ShowView (index,tab)">                        <spanclass= "Mui-icon": Class= "Index==tabindex?tab.iconactive:tab.icon"></span>                        <spanclass= "Mui-tab-label">{{Tab.name}}</span>                    </a>                </Template>            </nav>

View Code

1 //tab Page Object2         varBaritemarray = [{3ID: ' Material ',4Name: ' Material ',5URL: '.. /.. /water/material/index.html ',6tips:0,7Icon: ' Icon-cailiao ',8Iconactive: ' Icon-cailiaoactive '9             },Ten             { OneID: ' Parts ', AName: ' Parts ', -URL: '.. /.. /water/parts/index.html ', -tips:0, theIcon: ' Icon-bujian ', -Iconactive: ' Icon-bujianactive ' -             }, -             { +ID: ' Production ', -Name: ' Production Jobs ', +URL: '.. /.. /water/production/index.html ', Atips:0, atIcon: ' Icon-zuoye ', -Iconactive: ' Icon-zuoyeactive ' -             }, -             { -ID: ' Inspection ', -Name: ' Test ', inURL: '.. /.. /water/inspection/index.html ', -tips:0, toIcon: ' Icon-jianyan ', +Iconactive: ' Icon-jianyanactive ' -             } the];

View Code

_selfview =Plus.webview.currentWebview ()/*set the height of the navigation bar*/            varStyle1 ={popgesture:' None ', Top:20, bottom:0            }; varparams ={projectid: _selfview.projectid, Projtypeid: _selfview.projtypeid,}            _selfview.setstyle (Style1);  for(varIinchBaritemarray) {                varSub =NULL; varBar =Baritemarray[i]; if(Mui.os.ios) {//compatible with iOS                    //Create a new WebView pageSub =plus.webview.create (Baritemarray[i].url, Baritemarray[i].id, Style1,                params); } Else if(mui.os.android) {//compatible with Android                    //Create a new WebView pageSub =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); }            }            //show first page by defaultPlus.webview.show (baritemarray[0].id);

Drop-down refresh iOS and Android are also different

　

1 if(mui.os.android) {//if it is an Android drop -down refresh2 _selfview.setpulltorefresh ({3Supporttrue,4Height: ' 50px ',5Range: ' 100px ',6Style: ' Circle ',7Offset: ' 1px '8 }, Loaddowndata);9 }
Ten if(mui.os.android) {//if it's Android One       //End Refresh A _selfview.endpulltorefresh (); -}

　

WebApp Pit Record