一个移动端 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 的移动端手势插件，其在线 cdn 是 https://cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js , 直接用script 标签在线引进项目文件即可。然后需要在你自己的 js 文件里做如下设置：

$(function(){
    var myElement= document.getElementById('轮播 div 的 id 名称');
    // 实例化
    var hm = new Hammer(myElement);
    // 监听 swipeleft 和 swiperight 事件，使手指向左向右滑动切换
    hm.on("swipeleft",function(){
        $('# id 名称').carousel('next');
    })
    hm.on("swiperight",function(){
        $('# id 名称').carousel('prev');
    })
});

这样，在手机端你就可以通过手指滑动来实现图片轮播了。

布局错位

通常一个移动端的 H5 页面都有一些常见的布局，比如一行显示两个，连续几行铺排下去，又或是左边图片右边文字这样几行的布局。这些用 flex 布局或者用 bootstrap 的栅格布局一下子就搞定。问题出现在用了 bootstrap 的栅格布局后，刚开始挺好，等回过头看的时候发现布局乱了，原先一行显示两张图片，突然有一张被挤了下来。这无非就几种情况，要么某一个 div 的宽度过大撑起来，将旁边的挤了下来；要么就是 padding 或 margin 等边距问题，仔细排查下应该就能发现问题。再者，如果是电商，有分页功能，某一页出现了问题调好了，另外一页又变乱了，这时候就应该从全局去看整个模块的代码去分析了，在使用 bootstrap 的 UI 组件时可以读下相关的文字说明，结合实际情况分析改进，就可以避免一些冲突。

label 标签模拟单选、复选框

为了让按钮看起来更美观，提升用户体验，现在通常不直接用 input 标签的单选、复选按钮，而是用 label 标签结合 for 属性来模拟。具体代码如下：

HTML代码
<div class="test">
    <input type="checkbox" id="serach-moible">
    <label for="serach-moible">苹果</label>
</div>

CSS 代码
.test input{ opacity: 0; }
label{
   display: block;
   font-size: 14px;
   line-height: 14px;
}
input[type=checkbox]+label::before{
   content: '';
   background: transparent;
   border: 1px solid #000;
   box-shadow: inset 0 0 0 2px #fff;
   cursor: pointer;
   display: inline-block;
   width: 12px;
   height: 12px;
   margin-right: 12px;
   position: relative;
   top: 2px;
}
input[type=checkbox]:checked+label::before{
   background: #000;
}

代码运行起来是什么样子，你可以自己跑一下看看。模拟的过程就是先将原先的 input 标签隐藏，把按钮的样式添加在 label 标签上，当你点击 label 时，实际上就是选中了 input 单选按钮，为了这样，你必须要把 input 标签的 id 的值跟 label 标签的 for 属性值保持一致，这样就能通过操作 label 来操作按钮。

总结

不管学什么知识，实践是检验效果的唯一标准，多动手多实践，哪怕在简单的东西也要亲自去敲一遍代码才能有所了解，养成良好的编码习惯，有问题借助搜索引擎，不要死盯在一个点上，保持好心态继续做下去，可能哪个瞬间就把问题解决了。

本文完。