移动端项目记录1
1.在移动端给body的背景放一张背景图，切成1px的宽度，然后使用repeat-x去铺满全屏。因为单位引用的是rem.所以 background：url(../img/a.png) repeat-x center bottom;background-size:rem(1px) 100%;当时在pc的浏览器测试都是没有问题的。在移动端的各种浏览器打开也是没有问题的。但是如果直接用qq或者微信去访问的话，根本看不到背景图。于是一直改宽高各种，或者background：1px 100%；依然没有用，后来把background：100% 100%；终于可以直接用qq和微信直接访问。具体原因，我还不知道为什么。
2.移动端 写了一个返回的样式，但是没有写事件。返回到上一个 window.history.back(-1);
3js校验表单 用正则 点击提交的时候 开始校验 如下所示： 正则方法.test(需要校验的元素)。
$('#submit').click(function() {
var UCID = $('#ucid')[0].value;
var sPhone = $('#phone')[0].value;
var sName = $('#name')[0].value;
var IDcard = $('#idcard')[0].value;
if (UCID.replace(/(^\s*)|(\s*$)/g, "").length == 0) {
alert('UCID不能为空');
return;
}
if (sName.replace(/(^\s*)|(\s*$)/g, "").length == 0) {
alert('姓名不能为空!');
return;
}
if (!/^1\d{10}$/.test(sPhone)) {
alert("手机号格式有误！！");
return;
}
if (IDcard.replace(/(^\s*)|(\s*$)/g, "").length == 0) {
alert('身份证不能为空!');
return;
} else if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17} (\d|X|x)$)/.test(IDcard)) {
alert('身份证输入不合法!');
return;
}
$.ajax({
type: "post",
url: "",
data: {
},
success: function(data) {
}
})
})
4. 移动端的时间插件使用。点这里 使用很简单 给需要获取时间的表单添加一个id 。该插件本人觉得挺好用的 ，兼容大部分的，么有足够手机测试，所以哪些不兼容还不知道。页面如果有多个需要调用时间的也可以哦。而且可以更改css样式，换成你想要的。
//设置年月日 $('#backtime').date({ theme: "date" }); //设置年月日 时分秒 $('#backtime').date({ theme: "datetime" });
还有在dom加一个
<div class="form-box"> <span>机票返回时间:</span> <input type="text" name="backtime" id="backtime"> </div> <div id="submit">提交</div> <!--这个必须有的--> <div id="datePlugin"></div>
5.下拉刷新 上拉加载 插件的使用。只要有翻页的页面像排行榜个人中心等都应该有翻页功能。dropload.转载西门。
依赖 (dependence)
Zepto 或者 jQuery 1.7以上版本，推荐jQuery 2.x版本（二者不要同时引用）
Zepto or jQuery 1.7+，recommend to use jQuery 2.x（not use them at the same time）
使用方法 (usage)
<link rel="stylesheet" href="dropload.css"> <link rel="stylesheet" href="jquery.min.js" <script src="dropload.min.js"></script>
$(function() { // 页数 var page = 0; // 每页展示5个 var size = 5; // dropload //加载dom $('#wrapper').dropload({ //滑动区域 scrollArea: window, //加载下方function loadDownFn: function(me) { page++; // 拼接HTML var result = ''; $.ajax({ type: 'GET', url: '__PUBLIC__/js/morejson/ok.json', dataType: 'json', success: function(data) { //请求数据的长度 var arrLen = data.lists.length; if (arrLen > 0) { for (var i = 0; i < arrLen; i++) { //拼接result result += '<li>' + '<div class="box1">' + '<span class="num float-left">9</span>' + '<div class="header float-left">' + '<img src="__PUBLIC__/img/rank_img03.png__VERSION__">' + '</div>' + '<div class="user float-left">' + '<p class="name">佳儿</p>' + '<p class="invite">邀请5人</p>' + '</div>' + '</div>' + '<div class="number float-left"><span>6</span>条</div>' + '<div class="add float-right">添加</div>' + '</li>' } // 如果没有数据 } else { // 锁定 me.lock(); // 无数据 me.noData(); } // 为了测试，延迟1秒加载 setTimeout(function() { // 插入数据到页面，放到最后面 $('#scroller').append(result); // 每次数据插入，必须重置 me.resetload(); }, 1000); }, error: function(xhr, type) { alert('Ajax error!'); // 即使加载出错，也得重置 me.resetload(); } }); } }); });
这是基本的使用方法，西门的git上有其他的几个demo , 还有其他API的使用方法。
6 flex 弹性布局。参考文章 恩，这个我不太会用，这次又一个页面用到，感觉挺好的一个排行榜页面 . 一个大盒子 包裹三个小盒子，
大盒子：display:flex ;justify-content:space-between; align-items:center; 这样 里面的三个盒子就平均并且垂直居中的分布在大盒子里，比浮动然后设置margin来的简单。
7. text-align:right 本人很少会用到这个属性
当时是这个数字的多少不固定，那么怎么能够数字增多或者减少条都是靠右的呢。这个时候有两个选择。一个是text-align：right;不过当时好像因为弹性盒子的原因必须设置宽度才会有效。另一个就是margin-right.
8. iscroll5.js 插件的使用。这个我当时是为了可以自定义滚动条的样式，顺便还加了分页的功能。好像有些大材小用了，别的用法有待后期用。
//初始化 var myScroll = new IScroll('#wrapper', {//滚动的容器 scrollY: true, scrollbars: 'custom' // 代表要设置滚动条的样式 样式在css 设置。 }) // 没有更多了隐藏 $('.nomore').hide(); // 滚动条滚动到底部 myScroll.on('scrollEnd', function() { if (this.y >= 0) { return; //最顶部滑动不刷新数据 } // $.ajax({ // type: "method", // url: "url", // data: "data", // dataType: "dataType", // success: function(response) { // }, // error: function(response) { // } // }); //模拟数据加载 var num = Math.random(); if (num > 0.5) { $('.nomore').show(); } else { $('.nomore').html('正在加载中.....'); setTimeout(function() { var tpl = $("#tpl").html(); //将加载的数据放到容器里 $("#scroller").append(tpl); $('.nomore').toggle(); //刷新 滚动玩就刷新 myScroll.refresh(); }, 1000) } }) }) // 模拟加载的数据 <script type="text/sdsjansj" id="tpl"> <li> <span class="ornum">4</span> <span class="goods"> <h3>iPhone7 plus（32G红色限量版）</h3> <p> <span class="explain">人品大爆发获取</span> <span class="data">2017-06-16</span> <span class="time">15:45:12</span> </p> </span> </li> </script>
下面是设置滚动条的样式
/滚动条 .list::-webkit-scrollbar { display: none } .iScrollHorizontalScrollbar.iScrollBothScrollbars { right: 18px; } .iScrollVerticalScrollbar { position: absolute; z-index: 9999; width: 4px; bottom: 2px; top: 2px; right: 2px; overflow: hidden; } .iScrollVerticalScrollbar.iScrollBothScrollbars { bottom: 18px; } .iScrollIndicator { position: absolute; background: #d1a256; border-width: 1px; border-style: solid; border-color: #d1a256 #d1a256 #d1a256 #d1a256; border-radius: 8px; } .iScrollHorizontalScrollbar .iScrollIndicator { height: 100%; } .iScrollVerticalScrollbar .iScrollIndicator { width: 100%; }
9. 文字过多 破坏布局 。 比如在收货的时候需要填写用户的名字，但是一些用户的昵称非常的长，可能导致把其他的盒子挤下来破坏了布局。可以用css3属性
text-overflow:ellipsis; 这个是显示省略号代替被修剪的文本。还有同时喜欢出现的一种就是。记住：不要换行 white-space:nowrap 如果忘了的话，可能后期会很坑。
如果想要显示两行，又不想超出的话，white-space:normal; 上一层的盒子 overflow：auto;
10.用rem设置1px的边框 可能在ios 里看不清。 border:rem(1px) solid red; 在苹果手机里又一次显示的很尴尬，如果是1px 可以直接写 不用rem了。
11. 有的按钮加cursor:pointer属性在点击的时候有高亮。-webkit-tap-highlight-color:transparent; 可以设置高亮为透明。 这是一个非标准的属性所以还是尽量不要使用。
12. pageResponse.js 适配移动端插件
//pageResponse 适配移动设备 //视觉稿尺寸是640px*1008px，页面样式是以视觉稿尺寸除以2来计算，那么输入页面的宽度为320px和高度为504px window.onresize = pagesize; function pagesize() { pageResponse({ selectors: '.main', //模块的类名，使用class来控制页面上的模块(1个或多个) mode: 'contain', // auto || contain || cover width: '375', //输入页面的宽度，只支持输入数值，默认宽度为320px height: '667' //输入页面的高度，只支持输入数值，默认高度为504px }) } pagesize(); })
13 图片预加载 因为网速的问题，有时候打开一个网页图片还没有加载完，动画效果都结束了。这个时候可以用预加载
需要先写一个加载层。加载层的样式可以自己随便写。常见的有进度条
<!--加载层--> <div class="loding"> <div class="lo-content"> <img src="__PUBLIC__/shuaikang/img/locontent.png__VERSION__" class="img"> </div> <!--进度条--> <div id="progress"> <div class="progressbar"></div> </div> <p class="load-precenter"></p> </div>
//需要加载的图片 var files = [ "bg.png__VERSION__", "loding.png__VERSION__", "hy.png__VERSION__", ]; //遍历所有的预加载图片 files.forEach(function(k, i) { files[i] = '__PUBLIC__/shuaikang/img/' + files[i] }) preloadImages(files, { loadAllCallback: true }) //加载的进度条 样式 .onprogress(function(data) { //加载进度,每加载一次都会触发 var loaded = data.loadeds.length; var all = data.files.length; var progress = parseInt(100 * loaded / all, 10); $(".load-precenter").html(progress + "%"); $('.progressbar').width(progress + '%') var $progress = document.getElementById('progress'); }) .onerror(function() { //每当有图片加载失败都会触发 }) .onload(function(data) { //切换加载层和主层的显示 $('.loding,.main').toggle(); // 2s后显示主层 setTimeout(function() { $('.main').show(); }, 2000); })
14 流星雨动画效果 恩，这个可以用动画属性完成。主要是每个时刻切换图片 动画效果很多都可以用这个完成。
@keyframes rain { 0% { background: url(../img/z1.png) no-repeat center center; background-size: cover; } 33% { background: url(../img/z2.png) no-repeat center center; background-size: cover; } 66% { background: url(../img/z3.png) no-repeat center center; background-size: cover; } 100% { background: url(../img/z4.png) no-repeat center center; background-size: cover; } }
15. 恩，如果在html 页面写jQuery的话 要写$(function(){jQuery代码}) /$('document').ready(function(){}) 为了防止文档完全加载之前就运行jQuery代码
