第一次,触碰Web App项目,栽过的那些坑。
此项目是一个IPad上的Web App项目,页面的滚动用了最新的IScroll 5.0 插件, 确实是挺潮的。
项目用时 1个月 完成的, 准备今天晚上上线。
这是年前的最后一篇文章了,与众位博友分享下。
目录如下:
1 》--------------【iscroll 的 问题 】-------------------
2 》--------------【tap 点透 问题】-------------------
3 》--------------【Html5 Css3 弹出层效果-分享】----------
项目截图如下:
首页效果》:
弹出层效果》:
拉动刷新加载》:
长话短说,就从IScroll说起吧。
--------------【iscroll 的 问题 】-----------------
【1】. 动态加载某个模块,发现iscroll 没有 效果。
【2】. 使用jquery 的 (slideDown、slideUp )动画效果,发现iscroll的滚动条算高度会有问题。
【1】【2】的 解决方案:setTimeOut(function(){ new IScroll("#wrapper") },100);
【3】:iscroll里面的a链接点击没有效果。
解决方案:找到 preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A|IMG)$/ } 这句话,去掉 |A,就可以了,因为默认禁用了。
【4】:使用iscroll拖动到顶部,加载下一页数据。(此部分完全可以抽出来,做成一个通用的分页,偸了个懒)
代码片段如下:
productSrcoll.on("scrollEnd", function () { var y = -parseInt(productSrcoll.y); var yHeight = -parseInt(productSrcoll.maxScrollY); if (y >= yHeight) pullDownAction($("#pager").data("page")); }); //---------------------加载数据方法----------------------------- var pullDownAction = function (index, options) { var option = CreateUrlLink(); option.curpage = index; options = $.extend(option, options || {}); if ($("#pager").data("loadpage") && index != 1) return; $.ajaxLoading({ url: "@Html.Raw(Url.Action("SearchListByPage", "B2BProduct"))", data: options, type: "Get", success: function (data) { var newinfo = []; for (var i = 0; i < data.xcontent.length; i++) { var item = data.xcontent[i]; newinfo.push('<div class="pic"><dl><dt>', '<a >, '</dt><dd><p>' + item.INFOTITLE + '</p><p>单价:¥<i>' + item.PRICE.toFixed(2) + '</i></p></dd></dl></div>'); } index == 1 ? $("#pager").html(newinfo.join('')) : $("#pager").append(newinfo.join('')); data.xcontent.length <= 0 ? $("#pager").data("loadpage", "off") : index++ & $("#pager").data("page", index); productSrcoll.refresh(); productSrcoll.maxScrollY =productSrcoll.maxScrollY - 100; }, error: function () { $.MsgBox({ msg: "出现问题了", tipType: 'warning' }); } }); }
----------------【tap 点透 问题】------------------------
起因:由于我给页面大量用了 tap, 解决了click点击的延迟问题,同时也带来了新的问题。
如果我给document绑定tap事件,如果,弹层模板下面,有个元素也绑定了,此时就会出现点透的问题。
1. tap的 ”点透“ 问题。
推荐 大家可以看看 , 叶小钗 关于 “点透” 问题的文章分析:http://www.cnblogs.com/yexiaochai/p/3442220.html
解决方案:fastclick , 确实是解决了这个问题。
解决方案地址:http://blog.youyo.name/archives/zepto-tap-click-through-research.html
---------------【Html5 Css3 弹出层效果-分享】----------------------------------------------
css3 的 代码如下:
/****************弹出框效果 样式****************************/
.slideDown { animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 0.3s; -webkit-animation-duration: 0.3s; animation-timing-function: inherit; -webkit-animation-timing-function: inherit; visibility: visible !important; }
@keyframes slideDown { 0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
}
}
@-webkit-keyframes slideDown { 0% {
-webkit-transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(0%);
}
}
.slideLeft { animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; }
@keyframes slideLeft { 0% {
transform: translateX(150%);
}
50% {
transform: translateX(-8%);
}
65% {
transform: translateX(4%);
}
80% {
transform: translateX(-4%);
}
95% {
transform: translateX(2%);
}
100% {
transform: translateX(0%);
}
}
@-webkit-keyframes slideLeft { 0% {
-webkit-transform: translateX(150%);
}
50% {
-webkit-transform: translateX(-8%);
}
65% {
-webkit-transform: translateX(4%);
}
80% {
-webkit-transform: translateX(-4%);
}
95% {
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
.hideSwing { transform: translateX(300px); -webkit-transform: translateX(300px); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; }