随笔分类 -  web

 
setTimeout中调用this
摘要:项目案例: 左右切换tab容器的动作,封装到一个对象中: var slidingComp = { startX : 0 , moveX : 0 , ...... start : function(e) { ... }, move : function(e) { ... }, end : functi 阅读全文
posted @ 2017-12-15 11:16 xh.w 阅读(1217) 评论(0) 推荐(0)
列表页跳转到详情页,点击返回 回到原位置
摘要:新闻流和游戏列表需要实现 跳转到详情页后返回,回到原位置。 新闻流: 新闻资源支持iframe, 利用同源页面跳转,浏览器不会刷新页面,通过在iframe中打开新闻详情页实现。 location.history.pushState( {} , "title" , location.href ); $ 阅读全文
posted @ 2017-12-05 16:56 xh.w 阅读(4912) 评论(0) 推荐(0)
input获取焦点无效
摘要:js控制input获得焦点: $("input").focus(); 无效,写在延时函数中问题解决: setTimeout(function(){ $("input").focus(); },1); 可能原因:浏览器对dom的操作是等待代码执行完毕后进行。 阅读全文
posted @ 2017-10-24 10:46 xh.w 阅读(3855) 评论(0) 推荐(2)
url中特殊符号转换
摘要:特殊符号 url中显示 空格 %20 & %26 阅读全文
posted @ 2017-10-12 11:10 xh.w 阅读(1182) 评论(0) 推荐(0)
解析url中参数
摘要:兼容不带参数等情况 阅读全文
posted @ 2017-10-10 17:22 xh.w 阅读(672) 评论(0) 推荐(0)
position:sticky粘性布局
摘要:新的布局方式,专门用于 tab栏悬浮效果: 当tab栏在可视区域时,正常滚动, tab栏不再可视区域时,悬浮置顶。 position:-webkit-sticky; position:sticky; top:0px; left:0px; z-index:1000; 兼容性: 阅读全文
posted @ 2017-09-21 17:05 xh.w 阅读(354) 评论(0) 推荐(0)
background低版本安卓浏览器不支持复合属性,要分开写
摘要:background:url("http://..../xxx.jpg") no-repeat center/cover; 这种复合形式在有些低端安卓浏览器中不支持,最好分开写: background-image:url("http://..../xxx.jpg"); background-repe 阅读全文
posted @ 2017-08-08 18:35 xh.w 阅读(350) 评论(0) 推荐(0)
原生js封装tap
摘要:// tap事件封装function tap(obj, callBack){ if(typeof obj != 'object') return; // 变量 var startTime = 0; // 记录触摸开始时间 var isMove = false; // 记录是否产生移动 obj.add 阅读全文
posted @ 2017-08-06 17:46 xh.w 阅读(486) 评论(0) 推荐(0)
原生Js封装ajax方法
摘要:// ajax封装function ajax(options) { /** * 传入方式默认为对象 * */ options = options || {}; /** * 默认为GET请求 * */ options.type = (options.type || "GET").toUpperCase 阅读全文
posted @ 2017-08-06 17:45 xh.w 阅读(634) 评论(0) 推荐(0)
伸缩盒布局
摘要:display:flex(注意:所有相关属性都需要加-webkit-前缀) 阅读全文
posted @ 2017-08-05 16:25 xh.w 阅读(319) 评论(0) 推荐(0)
滚动条不能置底(未解决)
摘要:最近 做了一个移动端页面,内容可以显示全,但 即使拉到最底下,滚动条依然距离底部有一小段距离,这对于追求完美 略带强迫症的我,简直无法忍受! 另外,发现淘宝有些页面也是这样的,当我以为这是chrome浏览器 的问题的时候, 看到淘宝 还有些页面没有这个问题,这就奇怪了。 http://test.um 阅读全文
posted @ 2017-08-04 17:49 xh.w 阅读(345) 评论(0) 推荐(0)
h5页面嵌入android app时遇到的问题
摘要:1.h5页面 通过 .css("transform") 或 .style.transform 获取 transform属性,并通过 split 方法解析 页面translateY 的值,在chrome等浏览器中没有问题, 但涉及到与安卓app的数据交互时,安卓webview无法获取transform 阅读全文
posted @ 2017-08-02 10:40 xh.w 阅读(1121) 评论(0) 推荐(0)
transform带来的坑
摘要:1.transform会使子元素fixed定位和absolute定位失效。 2.父元素设置了border-radius和overflow:hidden, 但是子元素有transform属性,父元素设置无效,还是直角。 父元素添加属性:-webkit-transform:rotate(0deg) 可以 阅读全文
posted @ 2017-07-30 22:28 xh.w 阅读(441) 评论(0) 推荐(0)
移动端touchmove卡顿
摘要:网上提到的优化技术: 1.window. requestAnimationFrame() a.不用定义时间间隔,避免间隔长:卡顿,间隔短:浏览器漏帧的情况。由浏览器在绘制完一帧后自动再次调用绘制下一帧。 2.transform3D代替transform 3.增添惯性滑动效果,(不要小看惯性效果,效果 阅读全文
posted @ 2017-07-24 13:57 xh.w 阅读(1751) 评论(0) 推荐(0)
国际项目的语言适配问题
摘要:chrome浏览器设置语言有两种方式: pc端: move to top:设置偏好语言; 设置为浏览器默认语言。 移动端: 设置系统语言; 移动版浏览器本身没有设置语言的选项,需要同时在移动端和pc端登录同一个谷歌帐号(FQ),之后设置pc端偏好语言,移动端会同步pc端设置的偏好语言。 js中获取语 阅读全文
posted @ 2017-07-05 15:29 xh.w 阅读(167) 评论(0) 推荐(0)
transform子元素,绝对定位失效
摘要:公司项目需要上拉刷新功能, mui下拉刷新组件采用固定布局,无法触发浏览器自带的隐藏地址栏功能。 思路: touchmove事件监听程序中,判断滚动位置:上下顶点使用transform 移动最外层容器实现回弹。 缺点:有标题栏和分类导航栏 fixed 到顶部,会失效。 解决办法:transform换 阅读全文
posted @ 2017-07-01 00:01 xh.w 阅读(1119) 评论(0) 推荐(0)