一个移动端 H5 项目总结

两个月前做过几个移动端的 H5 页面，一些看似简单的东西一旦动手做起来总是会出现许多各式各样的问题，所以把这些问题记录下来，自己没事翻一翻，而且没准以后别人也遇到类似的问题，就可以供别人做参考，或者有个思路去解决。

position: fixed 定位失效

需求里要求把导航栏固定在顶部，这个也很简单，当然就是一个position: fiexed 的事，然而到 Chrome 上调成手机模式一看，emm , 手指一滑导航栏也跟着走了，可能很多程序员都有过这样的错觉，写代码写的美滋滋，一到浏览器一看，理想与现实的差距啊！出现这种情况，那说明 position: fiexed 没起到作用，首先检查了下是不是这行代码拼写出了问题，发现没有问题；接着进入浏览器控制台用光标指向了这个元素，查看它对应的 css 样式，发现并没有出现 position: fiexed ; 于是，去 google 了一下，看了许多关于这个问题的解释，发现这么一句话：父级元素如果有transform属性，会导致子元素的fixed失效。解决是父元素去掉 transform 属性或者父元素加 display：inline; 按照这个去修改了相应的代码，发现**还是没效果！！！**好吧，最后，把那一个模块的代码全删了重新写，并且按上面说的确保父元素没有 transform 之类的属性，终于有了导航栏固定顶部的效果。

几点启示：

1. 写代码要细心在细心，注意规范，否则写到后面很容易陷入混乱，一下子看不出哪里出了问题，又不知从哪调试起。
2. 用好 google 或百度等搜索引擎
3. 一个良好的心态有助于你在调试代码时更容易发现问题

手机端手指滑动轮播效果

简单的图片轮播用 js 或 jq 即可实现，需要注意的是在移动端，轮播图需要配合手指滑动，如何能让手指滑动的时候图片跟着切换？去网上 search 了一下，最终采用了一个叫做 hammer.js<