fe / yohobuywap-node · Commits

Go to a project

Authored by 陈峰
Commit 871b4c6842e82416c12cf5a3f0beaa9642c09151 1 parent b1221975

优化经典店铺滚动各个元素的交互

Inline Side-by-side
Showing 3 changed files with 114 additions and 95 deletions
1 'use strict'; 1 'use strict';
2 2
3 const fs = require('fs'); 3 const fs = require('fs');
4 -let devHost = '172.16.9.195'; 4 +let devHost = '127.0.0.1';
5 5
6 fs.readFile('.devhost', (err, buf)=> { 6 fs.readFile('.devhost', (err, buf)=> {
7 if (!err) { 7 if (!err) {
@@ -124,6 +124,8 @@ var defaultOpt = require('../common/query-param'); @@ -124,6 +124,8 @@ var defaultOpt = require('../common/query-param');
124 124
125 // 切换active状态到$pre上 125 // 切换active状态到$pre上
126 $pre.addClass('active'); 126 $pre.addClass('active');
  127 +
  128 + $('#pos-list').addClass('hide')
127 $pre.siblings('.filter').removeClass('active'); 129 $pre.siblings('.filter').removeClass('active');
128 subNavScrollTo(); 130 subNavScrollTo();
129 } 131 }
@@ -706,6 +708,7 @@ $newList.on('touchstart', 'li', function(e) { @@ -706,6 +708,7 @@ $newList.on('touchstart', 'li', function(e) {
706 } 708 }
707 709
708 $newList.addClass('hide'); 710 $newList.addClass('hide');
  711 + $('#pos-list').addClass('hide')
709 $firstLiDom.find('.nav-txt').text($(this).text()); 712 $firstLiDom.find('.nav-txt').text($(this).text());
710 $firstLiDom.attr('data-bp-id', bpIdData).addClass('active').siblings().removeClass('active'); 713 $firstLiDom.attr('data-bp-id', bpIdData).addClass('active').siblings().removeClass('active');
711 $subNav.find('.first-li-more').removeClass('new default sale').addClass(cls); 714 $subNav.find('.first-li-more').removeClass('new default sale').addClass(cls);
@@ -800,120 +803,133 @@ $subNav.on('touchend touchcancel', function(e) { @@ -800,120 +803,133 @@ $subNav.on('touchend touchcancel', function(e) {
800 $newList.find('li.sale').addClass('active').siblings().removeClass('active'); 803 $newList.find('li.sale').addClass('active').siblings().removeClass('active');
801 } 804 }
802 newListHide(); 805 newListHide();
803 - return true;  
804 - } 806 +
  807 + } else {
  808 + // 最新li 列表
  809 + $newList.addClass('hide');
805 810
806 - // 最新li 列表  
807 - $newList.addClass('hide'); 811 + if ($this.hasClass('filter')) {
  812 +
  813 + // 筛选面板切换状态
  814 + if ($this.hasClass('active') && !$('.filter-mask').hasClass('hide')) {
  815 + $('.home-sub-nav>li.filter').removeClass('active');
  816 + $this.removeClass('active');
  817 + filter.hideFilter();
  818 +
  819 + } else {
  820 + $('.home-sub-nav>li.filter').addClass('active');
  821 + $this.addClass('active');
808 822
809 - if ($this.hasClass('filter')) { 823 + filter.showFilter();
810 824
811 - // 筛选面板切换状态  
812 - if ($this.hasClass('active') && !$('.filter-mask').hasClass('hide')) {  
813 - $('.home-sub-nav>li.filter').removeClass('active');  
814 - $this.removeClass('active');  
815 - filter.hideFilter();  
816 - if ($('#list-nav').offset().top > $(document).scrollTop()) {  
817 - $('#pos-list').addClass('hide');  
818 - } 825 + if ($this.closest('.pos-list').length > 0) {
  826 + $('.filter-mask').addClass('call-by-fix').css('top', '');
  827 + } else {
  828 + $('.filter-mask').removeClass('call-by-fix').css('top', $this.offset().top + nav1H);
  829 + }
  830 + if ($('#pos-list').hasClass('hide')) {
  831 + $('#pos-list').removeClass('hide');
  832 + }
  833 +
  834 + }
819 } else { 835 } else {
820 - $('.home-sub-nav>li.filter').addClass('active');  
821 - $this.addClass('active');  
822 836
823 - filter.showFilter(); 837 + filter.hideFilter();// 隐藏面板
824 838
825 - if ($this.closest('.pos-list').length > 0) {  
826 - $('.filter-mask').addClass('call-by-fix').css('top', '');  
827 - } else {  
828 - $('.filter-mask').removeClass('call-by-fix').css('top', $this.offset().top + nav1H);  
829 - }  
830 - if ($('#pos-list').hasClass('hide')) {  
831 - $('#pos-list').removeClass('hide'); 839 + if ($this.hasClass('new')) {
  840 + cname = '.new';
  841 + navType = 'newest';
  842 + } else if ($this.hasClass('price')) {
  843 + cname = '.price';
  844 + navType = 'price';
  845 + } else if ($this.hasClass('discount')) {
  846 + cname = '.discount';
  847 + navType = 'discount';
  848 + } else if ($this.hasClass('default')) {
  849 + cname = '.default';
  850 + navType = 'default';
832 } 851 }
833 -  
834 - }  
835 - } else {  
836 852
837 - filter.hideFilter();// 隐藏面板  
838 -  
839 - if ($this.hasClass('new')) {  
840 - cname = '.new';  
841 - navType = 'newest';  
842 - } else if ($this.hasClass('price')) {  
843 - cname = '.price';  
844 - navType = 'price';  
845 - } else if ($this.hasClass('discount')) {  
846 - cname = '.discount';  
847 - navType = 'discount';  
848 - } else if ($this.hasClass('default')) {  
849 - cname = '.default';  
850 - navType = 'default';  
851 - }  
852 -  
853 - nav = navInfo[navType];  
854 - var reloadCb = function() {  
855 - $goodsContainer.children('.container:not(.hide)').addClass('hide');  
856 - switch (navType) {  
857 - case 'newest':  
858 - $ngc.removeClass('hide');  
859 - break; 853 + nav = navInfo[navType];
  854 + var reloadCb = function() {
  855 + $goodsContainer.children('.container:not(.hide)').addClass('hide');
  856 + switch (navType) {
  857 + case 'newest':
  858 + $ngc.removeClass('hide');
  859 + break;
  860 +
  861 + case 'price':
  862 + $pgc.removeClass('hide');
  863 + break;
  864 +
  865 + case 'discount':
  866 + $dgc.removeClass('hide');
  867 + break;
  868 + case 'default':
  869 + $defaultgc.removeClass('hide');
  870 + break;
  871 + default:
  872 + break;
  873 + }
  874 + };
860 875
861 - case 'price':  
862 - $pgc.removeClass('hide');  
863 - break; 876 + if ($this.hasClass('active')) {
864 877
865 - case 'discount':  
866 - $dgc.removeClass('hide');  
867 - break;  
868 - case 'default':  
869 - $defaultgc.removeClass('hide');  
870 - break;  
871 - default:  
872 - break;  
873 - }  
874 - }; 878 + // 最新无排序切换
  879 + if ($this.hasClass('new')) {
  880 + return;
  881 + }
875 882
876 - if ($this.hasClass('active')) { 883 + if ($this.hasClass('price') || $this.hasClass('discount')) {
  884 + $this = $subNav.find(cname);
877 885
878 - // 最新无排序切换  
879 - if ($this.hasClass('new')) {  
880 - return;  
881 - } 886 + // 价格/折扣切换排序状态
  887 + $this.find('.icon > .iconfont').toggleClass('cur');
  888 + nav.reload = true; // 重置reload,HTML会被替换为逆序的HTML
  889 + nav.order = nav.order === 0 ? 1 : 0; // 切换排序
882 890
883 - if ($this.hasClass('price') || $this.hasClass('discount')) {  
884 - $this = $subNav.find(cname); 891 + }
  892 + } else {
  893 + $active = $subNav.find('.active');
885 894
886 - // 价格/折扣切换排序状态  
887 - $this.find('.icon > .iconfont').toggleClass('cur');  
888 - nav.reload = true; // 重置reload,HTML会被替换为逆序的HTML  
889 - nav.order = nav.order === 0 ? 1 : 0; // 切换排序 895 + if ($active.hasClass('filter')) {
890 896
  897 + // 若之前active项为筛选，则隐藏筛选面板
  898 + filter.hideFilter();
  899 + }
  900 + $subNav.children().removeClass('active');
  901 + $subNav.find(cname).addClass('active');
891 } 902 }
892 - } else {  
893 - $active = $subNav.find('.active');  
894 -  
895 - if ($active.hasClass('filter')) {  
896 -  
897 - // 若之前active项为筛选，则隐藏筛选面板  
898 - filter.hideFilter(); 903 + if (!$('#pos-list').hasClass('hide')) {
  904 + subNavScrollTo();
  905 + }
  906 + if (nav.reload) {
  907 + search({
  908 + type: 'shop_id',
  909 + id: shopId,
  910 + brand: brand,
  911 + appVersion: appVersion,
  912 + url: '/product/search/search',
  913 + nextPage: false
  914 + }, reloadCb);
899 } 915 }
900 - $subNav.children().removeClass('active');  
901 - $subNav.find(cname).addClass('active');  
902 - }  
903 - if (!$('#pos-list').hasClass('hide')) {  
904 - subNavScrollTo();  
905 } 916 }
906 - if (nav.reload) {  
907 - search({  
908 - type: 'shop_id',  
909 - id: shopId,  
910 - brand: brand,  
911 - appVersion: appVersion,  
912 - url: '/product/search/search',  
913 - nextPage: false  
914 - }, reloadCb); 917 + }
  918 + if ($('#list-nav').offset().top > $(document).scrollTop() && $('.filter-mask').hasClass('hide')) {
  919 + if ($this.hasClass('first-li-more') && !$('#pos-list').hasClass('hide')) {
  920 + if ($('.new-list').hasClass('hide')) {
  921 + $('.new-list').removeClass('full-height');
  922 + $('#pos-list').addClass('hide');
  923 + } else {
  924 + $('.new-list').addClass('full-height');
  925 + }
  926 + } else {
  927 + $('#pos-list').addClass('hide');
915 } 928 }
  929 + } else if ($('#pos-list').hasClass('hide')) {
  930 + $('.new-list').removeClass('full-height');
916 } 931 }
  932 +
917 e.stopPropagation(); 933 e.stopPropagation();
918 }); 934 });
919 935
@@ -631,6 +631,9 @@ @@ -631,6 +631,9 @@
631 top: 81px; 631 top: 81px;
632 left: 0px; 632 left: 0px;
633 } 633 }
  634 + &.full-height {
  635 + height: 100%;
  636 + }
634 li { 637 li {
635 margin-left: 35px; 638 margin-left: 35px;
636 height: 88px; 639 height: 88px;