移动端页面V2.0项目改版总结

移动端页面已经进行的第三次改版，这个版本遇到的最大难题就是页面跳转的问题。

项目需求：页面上有分别有优惠估价、我要估价、历史竞拍这三个Tab选项卡，当用户点击估价,选择品牌以后，前端需要去请求品牌接口，获取品牌数据，进一步获取车系和车型。

项目实现：考虑到每个接口之间的数据传递问题。考虑把品牌车型车系的代码全部放在一个页面上。同事首先想到的是使用“前端路由” 这个东西。上网百度百度一下什么是前端路由。（可以读下这篇文字http://www.tuicool.com/articles/N7nAJbi）主要是通过"hash"和 HTML5 的 history API。但是因为项目时间周期比较紧，没有研究出来是怎么实现的。最后还是跟服务端商量，做成了一个独立的页面。通过向地址上添加?id="" 参数的形式获取所有数据。

解决方法优缺点：

1、由于“我要估价”在tab选项的中间。当用户点击品牌估价返回以后页面被刷新顶部，第二种解决方式的缺点在于返回的时候需要把tab选项卡切到 “我要估价”并且将滚动条滚动到“我要估价”的位置。

2、使用前端路由的好处是页面间的返回不会发生跳转。

移动端页面V2.0项目改版总结

获取地址？后的一个或者多个参数，可以使用下面这段代码，使用方式：var p = parseUrl(); var id = p.id

    function parseUrl(){

     var url = window.location.search;  //获取从问号开始的所有字符串

     var i = url.indexOf('?');  //查找是否有？

     if(i ==-1 ) return {};  //没有就不做任何事情

     var querystr = url.substr(i+1); //如果有问号则获取不包括问号以后的所有

     var arr1 = querystr.split('&'); //字符串以& 分割为数据

     var arr2 = {};

     for (i in arr1){

        var ta = arr1[i].split('=');  //在将每组数据在进行=分割

        arr2[ta[0]]=ta[1];   // 获取对应的key 和value

     }

     return arr2;

}

window.location 的属性和方法

移动端页面V2.0项目改版总结

移动端输入框点击会弹出键盘。项目中有一个有悬浮设置为position:fixed的文件，弹出键盘以后导致fixed的失效。这时候可以判断用户获得焦点的时候将浮动的对象位置改为absolute,失去焦点的时候则还原

changePosition(footSaleTel);

    function changePosition(obj){

        obj.bind('focus', function(event) {

            driftPosition.css({"position": "absolute"});

        }).bind("blur", function(){

            driftPosition.css({"position": "fixed"});

        });

    }

ios 对按钮聚焦和失去焦点不能使用focus 和 blur事件。考虑使用 touchstart 和 touchend

合并两个对象的值。在jquery 中可以使用$.extend(a,b); 如果第二个参数的元素在第一个中也有的话，第二个就会覆盖第一个，

var a = {'a':1,'b': 2};

var b = {'a': 2,'c': 3};

var c = $.extend(a, b);

合并两个数组，在jquery 中可以使用$.merge(a,b), 如果两个参数中有相同的部分。则会把相同额部分都罗列出来，可以使用$.unique() 去掉相同的部分。

秒客网

移动端页面V2.0项目改版总结

相关文章