移动端项目记录2
1.铺页面之前 要看所有的UI设计图 注意公共部分 页面的主体色和常用的色值 用变量定义
2.一些公用的样式 可以写一个类 然后在用的时候直接引用类 如果是和其他前端合作铺写页面 公共部分一定是要一样的写法。
3.需要高亮的元素 比如 选项卡 收藏等 要用active类
4. 一些元素的隐藏 比如 弹窗 选项卡 不要用js去隐藏 用display:none 来写 因为在网速慢的情况下 那些用js来隐藏的元素可能会出现然后 就很丑。所以页面要测试网速慢的情况
5.在移动端 一些需要点击的元素一般要加curpor:pointer 因为在ios可能点击没效果 这个同事告诉我的 虽然我没遇到过点击没效果的情况。
6.有些点击的元素比较小 像关闭按钮之类的 盒子的大小不能只写关闭按钮那么大 要写大一点 因为用户可能点击不到。如果是a标签要写块状
7.需要长按的元素要阻止浏览器默认行为
8.移动端的设计稿是2倍图 注意大小
9.要注意适配所有的手机大小 特别是小屏幕手机和大屏幕手机
10.因为后期 客户可能经常该需求 所以写页面的时候要多考虑 后期加东西或者减东西不至于乱了布局 或者浪费很长时间
11.严格按照psd的大小色值 去写 因为后期去调这种边距大小的问题 很烦人
12 下拉刷新 js校验 一定要写
13 别人后期帮你改了你不会的东西 一定要看懂他写的代码 同样的问题不要总犯
14 每天下班前对相关人员汇报相关内容
15小项目 写一个scss或者一个大模块一个
16 提交的时候要改版本号 在config 文件里 不用用户手动刷新
1.在大数据提交的时候 一般都要加loding
<div class="video-loding hide" id="vloading" style="z-index: 99999999;"> <div class="spinner "> <div class="spinner-container container1"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container2"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container3"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div style="position: absolute;top: 100%;color:#fff;white-space: nowrap;font-size: 10px;">加载中</div> </div> </div>
.video-loding { z-index: 111111; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: transparent center center no-repeat; background-size: contain; } .spinner { width: rem(50px); height: rem(50px); position: absolute; top: 50%; left: 50%; margin-left: rem(-25px); margin-top: rem(-25px); } .container1>div, .container2>div, .container3>div { width: 6px; height: 6px; background-color: #fff; border-radius: 100%; position: absolute; -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .spinner .spinner-container { position: absolute; width: 100%; height: 100%; } .container2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .container3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .circle1 { top: 0; left: 0; } .circle2 { top: 0; right: 0; } .circle3 { right: 0; bottom: 0; } .circle4 { left: 0; bottom: 0; } .container2 .circle1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .container3 .circle1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .container1 .circle2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .container2 .circle2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .container3 .circle2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .container1 .circle3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .container2 .circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .container3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .container1 .circle4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .container2 .circle4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .container3 .circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } } //loding end
随便找了一个 网上千千万。。。
3.像 使用定位的弹出层 在页面水平垂直居中 使用如下。这次都是移动端的各种弹窗 因为使用了定位又要在不同的大小的手机水平垂直居中 可以在css这样写
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
4.iscroll5.js 插件使用补充。
因为ui给的滚动条是需要自定义的 并且需要下拉刷新的效果 于是选择了iscroll5.js插件。
$('.title li').click(function() { $(this).addClass('active').siblings().removeClass('active'); $('.list').children('div').hide(); var index = $(this).index() + 1; $('.list-' + index).show(); myScrolls.refresh(); //在点击的时候刷新滚动条 important // console.log() }) window.myScrolls = new IScroll('#wrappers', { scrollY: true, scrollbars: 'custom' })
1.这次和上次的写法不太一样。当时遇到用了插件 但是页面却没办法用拖动 然后公司的前端教我用了 全局的方式 至于为什么我也不知道。但是用了之后 页面就可以拖动了。
2.然后还有一种情况是 做的是选项卡的滚动条。然后其中一个页面也没办法滚动。用了全局的方式依然没有效果。后来在切换选项卡的代码里加了 myscroll.refresh() 刷新滚
动条,就可以拖动页面了。
3.页面可以拖动,但是自定义的滚动条没有出现。 我出现这种情况是因为包裹层没有设置高度。 还有就是滚动条的位置不在包裹层里 还是body或者更外层的滚动。 只需要
给你需要的包裹层加个 position:relative;因为滚动条是position:absolute; 所以要加个定位。
5.flex-wrap:wrap/nowrap/wrap-reverse 指定弹性盒子 单行显示还是多行显示
这种布局特别常见 也比较简单。之前我都有两种写法 一种是margin-left:0!important;另外的盒子就是margin-left:值;这种写法 一行有几个盒子都没关系 只要第一个是margin-left:0!important!就可以。如果一行只有两个出现 还可以一个float:left,一个float:right;
如果是上面这种写法,后端需要判断几种情况。比较麻烦 。然后这种两个的就可以用弹性盒子解决。
display:flex;
justify-content:space-between;
flex-wrap:wrap;
一开始我只写了前两个属性,虽然盒子的包裹层设置了固定的宽度,但是所有的盒子都在一行,加flex-wrap:wrap表示换行。get一个新技能。
6.pageResponse.js 插件使用2
window.matchMedia || (window.matchMedia = function() { "use strict"; var styleMedia = (window.styleMedia || window.media); if (!styleMedia) { var style = document.createElement('style'), script = document.getElementsByTagName('script')[0], info = null; style.type = 'text/css'; style.id = 'matchmediajs-test'; if (!script) { document.head.appendChild(style) } else { script.parentNode.insertBefore(style, script) } info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle; styleMedia = { matchMedium: function(media) { var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }'; if (style.styleSheet) { style.styleSheet.cssText = text } else { style.textContent = text } return info.width === '1px' } } } return function(media) { return { matches: styleMedia.matchMedium(media || 'all'), media: media || 'all' } } }()); $(window).on("resize", function() { if (window.matchMedia && window.matchMedia("(orientation:portrait)").matches) { pageResponse() console.log(1111) } })
当时页面有一个需要输入信息的弹窗,但是每次安卓的手机输入框一聚焦 就会出现后面的页面变小的情况。是因为一开始用插件
window.onresize = pagesize; function pagesize() { pageResponse({ selectors: '.main', //模块的类名,使用class来控制页面上的模块(1个或多个) mode: 'contain', // auto || contain || cover width: '375', //输入页面的宽度,只支持输入数值,默认宽度为320px height: '667' //输入页面的高度,只支持输入数值,默认高度为504px }) } pagesize();
使用上面的方法 然后页面就会自适应的缩小。然后将这段代码改成上面的一大串就可以了。
* { -webkit-touch-callout: none; -webkit-touch-callout: none!important; user-select: none; -webkit-user-select: none; }
这段是阻止手机浏览器触摸默认行为,恩,没感觉有什么用。但是用了这段代码的话 输入框就无法点击并输入内容
input { -webkit-touch-callout: auto; -webkit-touch-callout: auto!important; user-select: auto; -webkit-user-select: auto; }
加上这个就行。
7 dropload.js选项卡 下拉加载
<script> var tabPage = { tab1: 0, tab2: 0, tab3: 0, tab4: 0 }; var tabEnd = { tab1: 0, tab2: 0, tab3: 0, tab4: 0 } var tabnow = "tab1"; //当前活动的选项 $(function() { "use strict"; var itemIndex = 0; var tab1LoadEnd = false; var tab2LoadEnd = false; var tab3LoadEnd = false; var tab4LoadEnd = false; // tab var $tabbox = $('.classify'); $tabbox.on('click', "li", function() { var $this = $(this); var index = ~~$this.index() + 1; $('.tab-content').children("ul").hide(); $tabbox.children().removeClass('active'); //移除高亮 $this.addClass('active'); //当前高亮 tabnow = "tab" + index; //标记切换活动选项卡 $('#content' + index).show(); // 如果选中菜单一 // 重置 dropload.unlock(); dropload.noData(false); dropload.resetload(); setTimeout(function() { dropload.resetload(); }, 1000) }); var counter = 0; // 每页展示4个 var num = 4; var pageStart = 0, pageEnd = 0; // dropload window.dropload = $('.tab-content').dropload({ scrollArea: window, autoLoad: true, threshold: 0, distance: 10, loadDownFn: function(me) { if (tabEnd[tabnow]) { me.noData(); me.lock(); me.resetload(); return; } $.ajax({ type: 'GET', url: '../core/js/ok.json', dataType: 'json', data: { page: ++tabPage[tabnow] }, success: function(data) { var result = ''; if (0) { if ((i + 1) >= data.lists.length) { // 数据加载完 tab1LoadEnd = true; // 锁定 me.lock(); // 无数据 me.noData();; } } for (var i = 1; i < 3; i++) { result += '<li>' + '<a href="javascript:void(0)">' + '<div class="art-pic">' + '<img src="../core/img/news1.png" alt="" class="img">' + '</div>' + '<div class="art-title">' + '<h3>手工胎教老师开始带领我们做了5分钟的音乐放松。</h3>' + '<div class="icons">' + '<div class="t-look">1543</div>' + '<div class="t-comment">576</div>' + '<div class="t-collect">156</div>' + '</div>' + '</div>' + '</a>' + '</li>' } // 为了测试,延迟1秒加载 setTimeout(function() { $('#content' + tabnow.substr(3)).append(result); // 每次数据加载完,必须重置 me.resetload(); }, 500); }, error: function(xhr, type) { alert('请求错误!'); // 即使加载出错,也得重置 me.resetload(); } }); return; // 加载菜单一的数据 } }); }) </script>
8.video 视频标签
不想说这个 恩,在安卓的微信简直不能再坑了。客户的要求是将之前的三个页面整合成一个页面 ,中间插两段视频,一个页面后播放一段视频视频播放完出现另外一个页面。
本来视频显示也不是啥难事,一开始是整合页面,因为用了pageresponse 这个插件所以中间改了很久。
参考文章:
html5--移动端视频video的android兼容,去除播放控件、全屏等
微信端视频播放问题