fe / YOHOBUYPC · Commits

Go to a project

Authored by biao
Commit 4f80fa777ac79e0f763920166420ea1ac2234ba1 2 parents 6ce5d45f b9e99d6d

fix layer position update bug

Inline Side-by-side
Showing 16 changed files with 123 additions and 58 deletions
@@ -45,7 +45,7 @@ $fixTitleBar.css({ @@ -45,7 +45,7 @@ $fixTitleBar.css({
45 minBrandListTop = brandSwipe + $('.hot-brand').outerHeight() + $('.banner-top').outerHeight(); 45 minBrandListTop = brandSwipe + $('.hot-brand').outerHeight() + $('.banner-top').outerHeight();
46 $brandList.last().append($fixTitleBar); 46 $brandList.last().append($fixTitleBar);
47 47
48 -$(window).scroll(function() { 48 +function scrollHandler() {
49 var scrTop = $(window).scrollTop(); 49 var scrTop = $(window).scrollTop();
50 50
51 if ($brandList.eq(0).offset().top < minBrandListTop) { 51 if ($brandList.eq(0).offset().top < minBrandListTop) {
@@ -62,6 +62,10 @@ $(window).scroll(function() { @@ -62,6 +62,10 @@ $(window).scroll(function() {
62 } 62 }
63 63
64 }); 64 });
  65 +}
  66 +
  67 +$(window).scroll(function() {
  68 + window.requestAnimationFrame(scrollHandler);
65 }); 69 });
66 70
67 function changeBackground() { 71 function changeBackground() {
@@ -107,12 +107,16 @@ $nav.on('touchend touchcancel', function(e) { @@ -107,12 +107,16 @@ $nav.on('touchend touchcancel', function(e) {
107 } 107 }
108 }); 108 });
109 109
110 -$(document).scroll(function() { 110 +function scrollHandler() {
111 var $c = $infos.not('.hide'); 111 var $c = $infos.not('.hide');
112 112
113 if ($(window).scrollTop() + winH >= $(document).height() - 0.25 * $c.height()) { 113 if ($(window).scrollTop() + winH >= $(document).height() - 0.25 * $c.height()) {
114 loadMore($c, state[curType]); 114 loadMore($c, state[curType]);
115 } 115 }
  116 +}
  117 +
  118 +$(window).scroll(function() {
  119 + window.requestAnimationFrame(scrollHandler);
116 }); 120 });
117 121
118 $nav.on('touchstart', function(e) { 122 $nav.on('touchstart', function(e) {
@@ -40,8 +40,12 @@ if ($tag.length > 0) { @@ -40,8 +40,12 @@ if ($tag.length > 0) {
40 }); 40 });
41 } 41 }
42 42
43 -$(document).scroll(function() { 43 +function scrollHandler() {
44 if ($(window).scrollTop() + winH >= $(document).height() - 0.25 * $infos.height()) { 44 if ($(window).scrollTop() + winH >= $(document).height() - 0.25 * $infos.height()) {
45 loadMore($infos, setting); 45 loadMore($infos, setting);
46 } 46 }
  47 +}
  48 +
  49 +$(window).scroll(function() {
  50 + window.requestAnimationFrame(scrollHandler);
47 }); 51 });
@@ -133,13 +133,17 @@ function search() { @@ -133,13 +133,17 @@ function search() {
133 }); 133 });
134 } 134 }
135 135
136 -$('.maybe-like p').on('touchstart', function (e) { 136 +$('.maybe-like p').on('touchstart', function(e) {
137 search(); 137 search();
138 }); 138 });
139 139
140 //srcoll to load more 140 //srcoll to load more
141 -$(window).scroll(function () { 141 +function scrollHandler() {
142 if ($(window).scrollTop() + winH >= $(document).height() - 50) { 142 if ($(window).scrollTop() + winH >= $(document).height() - 50) {
143 search(); 143 search();
144 } 144 }
  145 +}
  146 +
  147 +$(window).scroll(function() {
  148 + window.requestAnimationFrame(scrollHandler);
145 }); 149 });
@@ -18,45 +18,14 @@ var $search = $searchBox.children('input[type="text"]'), @@ -18,45 +18,14 @@ var $search = $searchBox.children('input[type="text"]'),
18 $cancelSearch = $box.children('.no-search'), 18 $cancelSearch = $box.children('.no-search'),
19 $searchIcon = $searchBox.children('.search-icon'); 19 $searchIcon = $searchBox.children('.search-icon');
20 20
21 -var updateLayerPosition = (function() {  
22 - var init = false,  
23 - windowViewHeight = 0;  
24 -  
25 -  
26 - return function() {  
27 - var winHeight = window.innerHeight,  
28 - bodyHeight = $doc.height(),  
29 - scrollTopPosition = $win.scrollTop(), 21 +// variables for calculate the app download layer position
  22 +var layerInit = false,
  23 + windowViewHeight = 0,
30 layerContentHeight = $appFloatLayer.height(), 24 layerContentHeight = $appFloatLayer.height(),
31 layerPaddingTop = parseInt($appFloatLayer.css('padding-top')), 25 layerPaddingTop = parseInt($appFloatLayer.css('padding-top')),
32 layerPaddingBottom = parseInt($appFloatLayer.css('padding-bottom')), 26 layerPaddingBottom = parseInt($appFloatLayer.css('padding-bottom')),
33 layerHeight = layerContentHeight + layerPaddingTop + layerPaddingBottom, 27 layerHeight = layerContentHeight + layerPaddingTop + layerPaddingBottom,
34 - newPosition;  
35 -  
36 - if (init) {  
37 -  
38 - //keyboard is shown  
39 - if (windowViewHeight - winHeight > 200) {  
40 - newPosition = bodyHeight - winHeight - scrollTopPosition - layerHeight;  
41 - } else {  
42 - newPosition = bodyHeight - winHeight - scrollTopPosition;  
43 - }  
44 -  
45 - if (scrollTopPosition + winHeight === bodyHeight) {  
46 - newPosition = 0;  
47 - }  
48 - } else {  
49 - windowViewHeight = winHeight;  
50 - newPosition = bodyHeight - winHeight - scrollTopPosition + layerHeight;  
51 - init = true;  
52 - }  
53 -  
54 - $appFloatLayer.css({  
55 - position: 'relative',  
56 - bottom: newPosition + 'px'  
57 - });  
58 - };  
59 -})(); 28 + layerNewPos;
60 29
61 require('../common'); 30 require('../common');
62 31
@@ -110,9 +79,38 @@ $channelLink.on('touchstart', function() { @@ -110,9 +79,38 @@ $channelLink.on('touchstart', function() {
110 }); 79 });
111 80
112 81
113 -$win.scroll(function() {  
114 - updateLayerPosition();  
115 -}); 82 +function updateLayerPosition() {
  83 + var winHeight = window.innerHeight,
  84 + bodyHeight = $doc.height(),
  85 + scrollTopPosition = $win.scrollTop();
  86 +
  87 + if (layerInit) {
  88 +
  89 + //keyboard is shown
  90 + if (windowViewHeight - winHeight > 200) {
  91 + if (scrollTopPosition + windowViewHeight + layerHeight >= bodyHeight) {
  92 + layerNewPos = 0;
  93 + } else {
  94 + layerNewPos = bodyHeight - windowViewHeight - scrollTopPosition - layerHeight;
  95 + }
  96 + } else {
  97 + layerNewPos = bodyHeight - winHeight - scrollTopPosition;
  98 + }
116 99
  100 + } else {
  101 + windowViewHeight = winHeight;
  102 + layerNewPos = bodyHeight - winHeight - scrollTopPosition + layerHeight;
  103 + layerInit = true;
  104 + }
  105 +
  106 + $appFloatLayer.css({
  107 + position: 'relative',
  108 + bottom: layerNewPos + 'px'
  109 + });
  110 +}
  111 +
  112 +$(window).scroll(function() {
  113 + window.requestAnimationFrame(updateLayerPosition);
  114 +});
117 115
118 $doc.on('ready', updateLayerPosition); 116 $doc.on('ready', updateLayerPosition);
@@ -164,6 +164,12 @@ $addressListPage.find('.address-last').each(function(i, elem) { @@ -164,6 +164,12 @@ $addressListPage.find('.address-last').each(function(i, elem) {
164 }); 164 });
165 }); 165 });
166 166
  167 +$addressListPage.on('touchstart', 'li', function() {
  168 + $(this).addClass('highlight');
  169 +}).on('touchend touchcancel', 'li', function() {
  170 + $(this).removeClass('highlight');
  171 +});
  172 +
167 $('input, textarea').on('focus', function() { 173 $('input, textarea').on('focus', function() {
168 $footer.hide(); 174 $footer.hide();
169 }).on('blur', function() { 175 }).on('blur', function() {
1 var $ = require('jquery'), 1 var $ = require('jquery'),
2 - Hammer = require('yoho.hammer'); 2 + Hammer = require('yoho.hammer'),
  3 + ellipsis = require('mlellipsis');
3 var employ; 4 var employ;
4 5
  6 +ellipsis.init();
  7 +
  8 +//Żȯ2ʾ
  9 +setTimeout(function() {
  10 + $('.coupon-name').each(function() {
  11 + this.mlellipsis(2);
  12 + });
  13 +}, 0);
  14 +
5 window.rePosFooter(); 15 window.rePosFooter();
6 $('.yoho-footer').css('border-top', '1px solid #e0e0e0'); 16 $('.yoho-footer').css('border-top', '1px solid #e0e0e0');
7 $('.employ span').each(function(index) { 17 $('.employ span').each(function(index) {
@@ -206,9 +206,8 @@ favContentHammer.on('tap', function(e) { @@ -206,9 +206,8 @@ favContentHammer.on('tap', function(e) {
206 }); 206 });
207 }); 207 });
208 208
209 -// 上拉加载更多  
210 -$(document).scroll(function() {  
211 209
  210 +function scrollHandler() {
212 if ($(window).scrollTop() + winH >= $(document).height() - footerH) { 211 if ($(window).scrollTop() + winH >= $(document).height() - footerH) {
213 212
214 if (brandTab) { 213 if (brandTab) {
@@ -231,4 +230,8 @@ $(document).scroll(function() { @@ -231,4 +230,8 @@ $(document).scroll(function() {
231 } 230 }
232 } 231 }
233 } 232 }
  233 +}
  234 +
  235 +$(window).scroll(function() {
  236 + window.requestAnimationFrame(scrollHandler);
234 }); 237 });
@@ -18,13 +18,17 @@ var setting = { @@ -18,13 +18,17 @@ var setting = {
18 end: false 18 end: false
19 }; 19 };
20 20
  21 +function scrollHandler() {
  22 + if ($(window).scrollTop() + winH >= $(document).height() - 0.25 * $infoList.height()) {
  23 + loadMore($infoList, setting, '/home/myguang');
  24 + }
  25 +}
  26 +
21 //对于有逛收藏的页面进行事件处理 27 //对于有逛收藏的页面进行事件处理
22 if ($infoList.length > 0) { 28 if ($infoList.length > 0) {
23 info.initInfosEvt($infoList); 29 info.initInfosEvt($infoList);
24 30
25 $(window).scroll(function() { 31 $(window).scroll(function() {
26 - if ($(window).scrollTop() + winH >= $(document).height() - 0.25 * $infoList.height()) {  
27 - loadMore($infoList, setting, '/home/myguang');  
28 - } 32 + window.requestAnimationFrame(scrollHandler);
29 }); 33 });
30 } 34 }
@@ -167,7 +167,7 @@ orderHammer.on('tap', function(e) { @@ -167,7 +167,7 @@ orderHammer.on('tap', function(e) {
167 } 167 }
168 }); 168 });
169 169
170 -$(window).scroll(function() { 170 +function scrollHandler() {
171 if (order.end === false && $(window).scrollTop() + winH > 171 if (order.end === false && $(window).scrollTop() + winH >
172 $(document).height() - 0.25 * $orderContainer.height()) { 172 $(document).height() - 0.25 * $orderContainer.height()) {
173 173
@@ -176,6 +176,10 @@ $(window).scroll(function() { @@ -176,6 +176,10 @@ $(window).scroll(function() {
176 noLoadingMask: true 176 noLoadingMask: true
177 }); 177 });
178 } 178 }
  179 +}
  180 +
  181 +$(window).scroll(function() {
  182 + window.requestAnimationFrame(scrollHandler);
179 }); 183 });
180 184
181 //初始化请求第一页数据 185 //初始化请求第一页数据
@@ -362,13 +362,17 @@ $listNav.on('touchend touchcancel', function(e) { @@ -362,13 +362,17 @@ $listNav.on('touchend touchcancel', function(e) {
362 } 362 }
363 }); 363 });
364 364
365 -$(window).scroll(function() { 365 +function scrollHandler() {
366 366
367 //当scroll到1/4$goodsContainer高度后继续请求下一页数据 367 //当scroll到1/4$goodsContainer高度后继续请求下一页数据
368 if ($(window).scrollTop() + winH > 368 if ($(window).scrollTop() + winH >
369 $(document).height() - 0.25 * $goodsContainer.height()) { 369 $(document).height() - 0.25 * $goodsContainer.height()) {
370 search(); 370 search();
371 } 371 }
  372 +}
  373 +
  374 +$(window).scroll(function() {
  375 + window.requestAnimationFrame(scrollHandler);
372 }); 376 });
373 377
374 if ($brandHeader.length > 0) { 378 if ($brandHeader.length > 0) {
@@ -347,11 +347,10 @@ $listNav.on('touchend touchcancel', function(e) { @@ -347,11 +347,10 @@ $listNav.on('touchend touchcancel', function(e) {
347 search(); 347 search();
348 } 348 }
349 } 349 }
350 -  
351 e.stopPropagation(); 350 e.stopPropagation();
352 }); 351 });
353 352
354 -$(window).scroll(function() { 353 +function scrollHandler() {
355 354
356 //当scroll到1/4$goodsContainer高度后继续请求下一页数据 355 //当scroll到1/4$goodsContainer高度后继续请求下一页数据
357 if ($(window).scrollTop() + winH > 356 if ($(window).scrollTop() + winH >
@@ -360,6 +359,10 @@ $(window).scroll(function() { @@ -360,6 +359,10 @@ $(window).scroll(function() {
360 search(); 359 search();
361 } 360 }
362 } 361 }
  362 +}
  363 +
  364 +$(window).scroll(function() {
  365 + window.requestAnimationFrame(scrollHandler);
363 }); 366 });
364 367
365 //初始请求最新第一页数据 368 //初始请求最新第一页数据
@@ -53,7 +53,8 @@ function hotrank(page, sort, tabId, notab) { @@ -53,7 +53,8 @@ function hotrank(page, sort, tabId, notab) {
53 }); 53 });
54 } 54 }
55 55
56 -$(window).scroll(function () { 56 +function scrollHandler() {
  57 +
57 if (page === 2) { 58 if (page === 2) {
58 return; 59 return;
59 } 60 }
@@ -63,11 +64,15 @@ $(window).scroll(function () { @@ -63,11 +64,15 @@ $(window).scroll(function () {
63 page = 2; 64 page = 2;
64 notab = 1; 65 notab = 1;
65 hotrank(page, sort, id, notab); 66 hotrank(page, sort, id, notab);
  67 +}
66 68
  69 +$(window).scroll(function() {
  70 + window.requestAnimationFrame(scrollHandler);
67 }); 71 });
  72 +
68 hotrank(page, sort, id, notab); 73 hotrank(page, sort, id, notab);
69 hotnav = new Hammer(document.getElementById('hotRank')); 74 hotnav = new Hammer(document.getElementById('hotRank'));
70 -hotnav.on('tap', function (e) { 75 +hotnav.on('tap', function(e) {
71 var ev = ev || window.event; 76 var ev = ev || window.event;
72 var target = ev.target || ev.srcElement; 77 var target = ev.target || ev.srcElement;
73 78
@@ -359,7 +359,8 @@ $listNav.on('touchend touchcancel', function(e) { @@ -359,7 +359,8 @@ $listNav.on('touchend touchcancel', function(e) {
359 e.stopPropagation(); 359 e.stopPropagation();
360 }); 360 });
361 361
362 -$(window).scroll(function() { 362 +
  363 +function scrollHandler() {
363 364
364 //当scroll到1/4$goodsContainer高度后继续请求下一页数据 365 //当scroll到1/4$goodsContainer高度后继续请求下一页数据
365 if ($(window).scrollTop() + winH > 366 if ($(window).scrollTop() + winH >
@@ -368,6 +369,10 @@ $(window).scroll(function() { @@ -368,6 +369,10 @@ $(window).scroll(function() {
368 search(); 369 search();
369 } 370 }
370 } 371 }
  372 +}
  373 +
  374 +$(window).scroll(function() {
  375 + window.requestAnimationFrame(scrollHandler);
371 }); 376 });
372 377
373 //初始请求最新第一页数据 378 //初始请求最新第一页数据
@@ -207,10 +207,16 @@ @@ -207,10 +207,16 @@
207 font-size: pxToRem(32px); 207 font-size: pxToRem(32px);
208 line-height: pxToRem(88px); 208 line-height: pxToRem(88px);
209 border-bottom: 1px solid #e0e0e0; 209 border-bottom: 1px solid #e0e0e0;
  210 +
210 .iconfont { 211 .iconfont {
211 float: right; 212 float: right;
212 color: #d0d0d0; 213 color: #d0d0d0;
213 } 214 }
  215 +
  216 + &.highlight {
  217 + background: #eee;
  218 + }
  219 +
214 ul { 220 ul {
215 display: none; 221 display: none;
216 position: absolute; 222 position: absolute;
@@ -3,6 +3,7 @@ @@ -3,6 +3,7 @@
3 height: 90rem / $pxConvertRem; 3 height: 90rem / $pxConvertRem;
4 overflow: hidden; 4 overflow: hidden;
5 border-bottom:1px solid #e0e0e0; 5 border-bottom:1px solid #e0e0e0;
  6 + position: relative;
6 span{ 7 span{
7 width: 49%; 8 width: 49%;
8 height: 48rem / $pxConvertRem; 9 height: 48rem / $pxConvertRem;
@@ -72,7 +73,7 @@ @@ -72,7 +73,7 @@
72 position: absolute; 73 position: absolute;
73 left: 0; 74 left: 0;
74 top:50%; 75 top:50%;
75 - @include transform(translateY(-60%)); 76 + @include transform(translateY(-50%));
76 i{ 77 i{
77 width: 100%; 78 width: 100%;
78 height: 120rem / $pxConvertRem; 79 height: 120rem / $pxConvertRem;
@@ -100,7 +101,7 @@ @@ -100,7 +101,7 @@
100 background: #444444; 101 background: #444444;
101 color: #fff; 102 color: #fff;
102 text-align: center; 103 text-align: center;
103 - margin: 32em / $pxConvertRem auto; 104 + margin: 60rem / $pxConvertRem auto 0;
104 @include border-radius(.2rem); 105 @include border-radius(.2rem);
105 106
106 } 107 }