微采商场优化问题汇总

1.页面体验优化建议

1.顶部系统反馈号码重叠

2.商品分类栏hover上去，高度变低（2px）。（border-color ：#fff）

css-problem ![J{P6({Q4J(KU@N5]QUDI29O.png

3.这块tab切换时文字位移，这块上边框建议border实现，不用切图。

tab-problem.png

4.合作区域hover箭头消失，另外下面这个下拉区域可以加个box-shadow。
![J{P6({Q4J(KU@N5]QUDI29O.png](http://upload-images.jianshu.io/upload_images/3402722-13153952d3ddb7b5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
.png](http://upload-images.jianshu.io/upload_images/3402722-aae016289a051bcc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

5.这块返回顶部可以加个缓动效果参考如下:

 var $back = $('#backTop'),
    winH = $(window).height();

var move = function() {
    if (!$('body,html').is(":animated")) {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
    }
}
var checkPos = function(pos) {
    if ($(window).scrollTop() > pos) {
        $back.fadeIn();
    } else {
        $back.fadeOut();
    }
}

$back.on('click', move);
checkPos(winH);
$(window).on('scroll', function() {
    checkPos(winH);
})

6..这块要切成png的透明背景的，关于制作成雪碧图问题，目前项目基本完成代价比较大，后期维护修改图片也不方便(部分页面css也要调整):

png的透明背景问题.png

7.这块不连贯,点几下后面就没了。（需要复制一份可以用myclass插件实现）

myclass.png

8.有缺口

Paste_Image.png

9.带分页的列表展示页面,可以采取aajx局部刷新(建议)

2.js,css细节优化方案

1.尽量用id选择器,获取用id选择器选择到下一级,另外用$("#id").find("li")比$("#id li")高效。如下在searchselect li上绑定事件可以用jq的事件委托。

 $("#searchselect").on("click","li",function () {
   });

Paste_Image.png

2.变量，$对象的缓存(用到多次的变量和对象)可以缓存下，js有变量自动提升机制尽量提前定义。

$(window).scroll(function () {
       var pos = $(window).scrollTop(),
             $headerFloor = $('#header-floor')；
       if (pos > 378) {
           $headerFloor.removeClass('hidden');
       } else {
           $headerFloor.addClass('hidden');
       }
   });