webAPP踩坑记录
最近公司突然给我们下了一个任务 一个星期要做出一个系统网站 外加手机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>
第二个底部菜单 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>
//选项卡页面对象
var barItemArray = [{
id: 'material',
name: '材料',
url: '../../water/material/index.html',
tips: 0,
icon: 'icon-cailiao',
iconActive:'icon-cailiaoActive'
},
{
id: 'parts',
name: '部件',
url: '../../water/parts/index.html',
tips: 0,
icon: 'icon-bujian',
iconActive:'icon-bujianActive'
},
{
id: 'production',
name: '生产作业',
url: '../../water/production/index.html',
tips: 0,
icon: 'icon-zuoye',
iconActive:'icon-zuoyeActive'
},
{
id: 'inspection',
name: '检验',
url: '../../water/inspection/index.html',
tips: 0,
icon: 'icon-jianyan',
iconActive:'icon-jianyanActive'
}
];
_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 也有差异
if(mui.os.android) { //如果是安卓 下拉刷新
_selfView.setPullToRefresh({
support: true,
height: '50px',
range: '100px',
style: 'circle',
offset: '1px'
}, loadDownData);
}
if(mui.os.android) { //如果是安卓
//结束刷新
_selfView.endPullToRefresh();
}
webAPP踩坑记录的更多相关文章
- unionId突然不能获取的踩坑记录
昨天(2016-2-2日),突然发现系统的一个微信接口使用不了了.后来经查发现,是在网页授权获取用户基本信息的时候,unionid获取失败导致的. 在网页授权获取用户基本信息的介绍中(http://m ...
- webapp填坑记录[更新中]
网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...
- CentOS7.4安装MySQL踩坑记录
CentOS7.4安装MySQL踩坑记录 time: 2018.3.19 CentOS7.4安装MySQL时网上的文档虽然多但是不靠谱的也多, 可能因为版本与时间的问题, 所以记录下自己踩坑的过程, ...
- ubuntu 下安装docker 踩坑记录
ubuntu 下安装docker 踩坑记录 # Setp : 移除旧版本Docker sudo apt-get remove docker docker-engine docker.io # Step ...
- SpringBoot + Shiro + shiro.ini 的踩坑记录
0.写在前面的话 好久没写博客了,诶,好多时候偷懒直接就抓网上的资料丢笔记里了,也就没有自己提炼,偷懒偷懒.然后最近参加了一个网络课程,要交作业的那种,为了能方便看下其他同学的作业,就写了个爬虫把作业 ...
- 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密
你真的了解字典(Dictionary)吗? 从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...
- google nmt 实验踩坑记录
最近因为要做一个title压缩的任务,所以调研了一些text summary的方法. text summary 一般分为抽取式和生成式两种.前者一般是从原始的文本中抽取出重要的word o ...
- ABP框架踩坑记录
ABP框架踩坑记录 ASP.NET Boilerplate是一个专用于现代Web应用程序的通用应用程序框架. 它使用了你已经熟悉的工具,并根据它们实现最佳实践. 文章目录 使用MySQL 配置User ...
- SpringBoot+SpringSecurity+Thymeleaf认证失败返回错误信息踩坑记录
Spring boot +Spring Security + Thymeleaf认证失败返回错误信息踩坑记录 步入8102年,现在企业开发追求快速,Springboot以多种优秀特性引领潮流,在众多使 ...
随机推荐
- 关于史考特证券(scottrade Inc)资金转出的手续费问题
投资美股账户的朋友可能开始的时候并没有关心史考特账户转出的费用,其实,仔细算一下这个费用还是蛮贵的,根据官网的文档可以明确知道,转出史考特账户资金到国内银行的费用由以下几项组成: 1. 国际电汇资金费 ...
- 一个ICON图标的转换程序
抽空写了一个ICON图标的转换程序,支持png\jpe\bmp格式到ico的转换.具体的程序就在下面,如果看的人多,过两天再把思路写一下.废话不说,见代码. ...
- ORA-01843: 无效的月份
1.插入的日期如果是DateTime类型的,没有影响 2.如果DateTime.ToString()获取的日期,就会报错,例如(@param_datetime = cf.GetServerDateTi ...
- HTML页面加载异常,按F12调试后居然又好了的解决办法!
原因: 你的代码中获取数据那一段应该是有console控制台调用的代码,一般应该是console.log之类的,就是因为这句话在没开F12的时候,console是个undefined的东西就卡在那啦. ...
- 一些常用软件的静默安装参数(nsis,msi,InstallShield,Inno)
打包的时候,经常需要安装一些其它的环境库,而又不想让用户繁锁的去选择,这时就需要静默安装,而不同的文件所加的参数了不一致,比如VS的环境库vcredist_x86.exe(这是32位的环境库)后面加/ ...
- CORS(跨站资源共享)介绍
起因 有同学在nginx站点配置中加了一行Access-Control-Allow-Origin *,导致微信中业务数据异常,抓包看http头有两个Access-Control-Allow-Origi ...
- 译|调整JavaScript抽象的迭代方案
原文作者:Kaloyan Kosev 原文链接:https://css-tricks.com/adapting-javascript-abstractions-time/ 翻译译者:小溪里 校对:华翔 ...
- codeforces 895A Pizza Separation 枚举
codeforces 895A Pizza Separation 题目大意: 分成两大部分,使得这两部分的差值最小(注意是圆形,首尾相连) 思路: 分割出来的部分是连续的,开二倍枚举. 注意不要看成0 ...
- mysql实现full join
呵呵,,,有个坑,,mysql默认不支持full join 是吧. 什么是full join呢就是left+right join 可以使用union联表解决这个问题 union 链接 http:// ...
- java 接口测试
学习java 时间也不算太长,大学有点基础,学起来也顺手多了,其实我感觉更是因为学习完python之后,在学习别的语言的时候就简单多了,几乎所有的语言学起来都差不多.前几篇写过的都是python接口测 ...