日常开发经验系列(2017.6.29)

原创 走火爱上鱼 随笔 实战经验 681阅读 2017-06-29 14:40:22 举报

1.音乐导航条

某天看到某个网站有这样的效果,就模仿了一下,纯属好玩。(请在有音响的电脑上面打开体验更加)

html 代码

2.localStorage存储静态资源js。

对于一个页面来说有些内裤,框架很长时间是不变的,当然了业务代码在一定时间内也是不变的,所以我们可以用localStorage将这些js都存在客户端,这招对于移动端H5性能提高很有用,虽然只是减少了304,但是在移动端缓存击中的概率只有30%左右。下面这段代码可以在没有客户端没有相应js或者js版本号的情况下请求新的相应的js,存在并且版本号相同的情况下用客户端的js,所以要注意的是一旦业务代码改了一定要改相应js的版本号哦。

javascript 代码

3.仿苹果按钮

这次业务变更,在结算页面要多一个这样供用户选择的按钮。

html 代码

4.在div上面绑定click事件 手机端失效

这次的改版其中就有一个点击提示弹出一个提示信息的地址,一开始我用的是div布局,在这个dom元素上面绑定一个点击事件click,pc端一切正常,不过在手机上面就发现点击没有任何反应,用排除法后发现就算是直接弹出一个数字都是不行的,那么就可以肯定是div上面绑定click事件在手机上没有起左右。一个最简单的方法就是将div换成a。我当时想到是不是由于滚动touch相关的事件里阻止了默认行为所以导致click事件失效,所以又在没有滚动屏幕的div上面绑定了click事件,还真有效。其实除了用a标签替换div。我们还可以给div加cursor:pointer属性或者在div上面加onclick=“”,我的感觉就是要抵消组织默认事件就可以了。

5.移动端强制刷新问题

这次在店铺首页,点击分类会在当前页面弹出一个分类弹框。然后点击分类到搜索结果页面。但是我发现从搜索结果页面返回到店铺首页的时候分类弹框还在(手机上测试)。。。这可不好的体验。检测代码发现我一开始用的是javascript:history.go(-1)。后面查了资料才发现返回上一页也是有很多方法的。html 代码

6.分享一个js+css结合的图片轮播,这次商城改版就用在首页了。对于这种淡入谈出的,我发现最大的难点在于如何写一个柔和的缓动函数,我这里就直接用css3的属性transition。

html 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复