fe / yohobuywap-node · Commits

Go to a project

Authored by 徐炜
Commit 2a4949a7acc5afb30485a7fbdf6f53dca1b0b585 1 parent 22533a5c

逛详情优化

Inline Side-by-side
Showing 8 changed files with 106 additions and 50 deletions
@@ -41,12 +41,22 @@ const _pageArticleContent = (articleContent, isApp, gender) => { @@ -41,12 +41,22 @@ const _pageArticleContent = (articleContent, isApp, gender) => {
41 joinContentFunc(++i, len); 41 joinContentFunc(++i, len);
42 } else if (art.singleImage && art.singleImage.data && art.singleImage.data.length) { // 单张图 42 } else if (art.singleImage && art.singleImage.data && art.singleImage.data.length) { // 单张图
43 build.bigImage = helpers.image(art.singleImage.data[0].src, 640, 640); 43 build.bigImage = helpers.image(art.singleImage.data[0].src, 640, 640);
  44 +
  45 + // 前三张图片不使用懒加载，下同
  46 + if (i <= 3) {
  47 + build.noLazy = true;
  48 + }
  49 +
44 contents.push(build); 50 contents.push(build);
45 joinContentFunc(++i, len); 51 joinContentFunc(++i, len);
46 52
47 } else if (art.smallPic && art.smallPic.data && art.smallPic.data.length > 1) { 53 } else if (art.smallPic && art.smallPic.data && art.smallPic.data.length > 1) {
48 let imgs = art.smallPic.data; 54 let imgs = art.smallPic.data;
49 55
  56 + if (i <= 3) {
  57 + build.noLazy = true;
  58 + }
  59 +
50 build.smallImage = [{ 60 build.smallImage = [{
51 src: helpers.image(imgs[0].src, 315, 420) 61 src: helpers.image(imgs[0].src, 315, 420)
52 }, { 62 }, {
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 {{# author}} 5 {{# author}}
6 <div class="author" data-id={{id}}> 6 <div class="author" data-id={{id}}>
7 <a class="clearfix" href={{url}}> 7 <a class="clearfix" href={{url}}>
8 - <img class="avatar" src={{avatar}}> 8 + <img class="avatar" src={{image2 avatar mode=2 q=60}}>
9 <span class="name">{{name}}</span> 9 <span class="name">{{name}}</span>
10 <span class="intro">{{intro}}</span> 10 <span class="intro">{{intro}}</span>
11 </a> 11 </a>
@@ -27,15 +27,25 @@ @@ -27,15 +27,25 @@
27 27
28 {{#if bigImage}} 28 {{#if bigImage}}
29 <div class="post-block big-img-block"> 29 <div class="post-block big-img-block">
30 - <img class="lazy" data-original={{bigImage}}> 30 + {{#if noLazy}}
  31 + <img src={{image2 bigImage q=60}}>
  32 + {{else}}
  33 + <img class="lazy" data-original={{image2 bigImage q=60}}>
  34 + {{/if}}
31 </div> 35 </div>
32 {{/if}} 36 {{/if}}
33 37
34 {{#if smallImage}} 38 {{#if smallImage}}
35 <div class="post-block small-img-block clearfix"> 39 <div class="post-block small-img-block clearfix">
  40 + {{#if noLazy}}
  41 + {{# smallImage}}
  42 + <img src={{image2 src q=60}}>
  43 + {{/ smallImage}}
  44 + {{else}}
36 {{# smallImage}} 45 {{# smallImage}}
37 - <img class="lazy" data-original={{src}}> 46 + <img class="lazy" data-original={{image2 src q=60}}>
38 {{/ smallImage}} 47 {{/ smallImage}}
  48 + {{/if}}
39 </div> 49 </div>
40 {{/if}} 50 {{/if}}
41 51
@@ -156,7 +166,7 @@ @@ -156,7 +166,7 @@
156 <img class="lazy {{#if squareThumb}}square{{/if}}" data-original={{thumb}}> 166 <img class="lazy {{#if squareThumb}}square{{/if}}" data-original={{thumb}}>
157 <span class="title">{{title}}</span> 167 <span class="title">{{title}}</span>
158 <span class="publish-time"> 168 <span class="publish-time">
159 - <i class="iconfont">&#xe603;</i> 169 + <i class="iconfont">&#xe603;</i>
160 {{publishTime}} 170 {{publishTime}}
161 </span> 171 </span>
162 </a> 172 </a>
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 * @date: 2015/10/21 4 * @date: 2015/10/21
5 */ 5 */
6 var $ = require('yoho-jquery'), 6 var $ = require('yoho-jquery'),
7 - Hammer = require('yoho-hammer'); 7 + Hammer = require('./common/toy-hammer');
8 8
9 var $footer = $('#yoho-footer'), 9 var $footer = $('#yoho-footer'),
10 $yohoPage = $('.yoho-page'), 10 $yohoPage = $('.yoho-page'),
  1 +// 超轻量锤子，业务代码不用动，替换掉重量级的 hammer.js
  2 +const $ = require('yoho-jquery');
  3 +
  4 +const ToyHammer = function(elem) {
  5 + this.elem = elem;
  6 +};
  7 +
  8 +const EVENT_MAPPER = {
  9 + tap: 'touchstart'
  10 +};
  11 +
  12 +ToyHammer.prototype.on = function(event, fn) {
  13 + const mappedEvent = EVENT_MAPPER[event];
  14 +
  15 + if (this.elem && mappedEvent) {
  16 + $(this.elem).on(mappedEvent, function(e) {
  17 + fn({
  18 + srcEvent: e
  19 + });
  20 + });
  21 + }
  22 +};
  23 +
  24 +
  25 +module.exports = ToyHammer;
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 */ 5 */
6 6
7 var $ = require('yoho-jquery'), 7 var $ = require('yoho-jquery'),
8 - Hammer = require('yoho-hammer'), 8 + Hammer = require('../common/toy-hammer'),
9 ellipsis = require('yoho-mlellipsis'), 9 ellipsis = require('yoho-mlellipsis'),
10 lazyLoad = require('yoho-jquery-lazyload'), 10 lazyLoad = require('yoho-jquery-lazyload'),
11 Swiper = require('yoho-swiper'); 11 Swiper = require('yoho-swiper');
@@ -7,8 +7,8 @@ require("guang/info-index.page.css") @@ -7,8 +7,8 @@ require("guang/info-index.page.css")
7 7
8 var $ = require('yoho-jquery'), 8 var $ = require('yoho-jquery'),
9 ellipsis = require('yoho-mlellipsis'), 9 ellipsis = require('yoho-mlellipsis'),
10 - lazyLoad = require('yoho-jquery-lazyload'),  
11 - IScroll = require('yoho-iscroll/build/iscroll-probe'); 10 + lazyLoad = require('yoho-jquery-lazyload');
  11 +//IScroll = require('yoho-iscroll/build/iscroll-probe');
12 12
13 var $authorIntro = $('.author .intro'); 13 var $authorIntro = $('.author .intro');
14 14
@@ -31,6 +31,10 @@ require('../common'); @@ -31,6 +31,10 @@ require('../common');
31 require('../plugin/wx-share')(); 31 require('../plugin/wx-share')();
32 require('./detail-dynamic'); 32 require('./detail-dynamic');
33 33
  34 +$('#wrapper').css({
  35 + 'overflow-y': 'scroll'
  36 +});
  37 +
34 /** 38 /**
35 * 计算搭配的箭头的位置 39 * 计算搭配的箭头的位置
36 * @param $curPos 当前focus的搭配项 40 * @param $curPos 当前focus的搭配项
@@ -112,16 +116,15 @@ function initIscroll() { @@ -112,16 +116,15 @@ function initIscroll() {
112 if ($yohoHeader.length > 0) { 116 if ($yohoHeader.length > 0) {
113 hH = $yohoHeader.outerHeight(); 117 hH = $yohoHeader.outerHeight();
114 } 118 }
115 -  
116 - myScroll = new IScroll('#wrapper', {  
117 - probeType: 3,  
118 - mouseWheel: true,  
119 - click: true  
120 - });  
121 -  
122 - document.addEventListener('touchmove', function(e) {  
123 - e.preventDefault();  
124 - }, false); 119 + /*
  120 + myScroll = new IScroll('#wrapper', {
  121 + probeType: 3,
  122 + mouseWheel: true,
  123 + click: true
  124 + });
  125 + document.addEventListener('touchmove', function(e) {
  126 + e.preventDefault();
  127 + }, false);
125 128
126 if (!hasCollocationBlock) { 129 if (!hasCollocationBlock) {
127 myScroll.on('scroll', function() { 130 myScroll.on('scroll', function() {
@@ -130,6 +133,9 @@ function initIscroll() { @@ -130,6 +133,9 @@ function initIscroll() {
130 return; 133 return;
131 } 134 }
132 135
  136 + */
  137 +
  138 +
133 winH = $(window).height() - hH; 139 winH = $(window).height() - hH;
134 fixedThumbDom = $fixedThumbContainer[0]; 140 fixedThumbDom = $fixedThumbContainer[0];
135 141
@@ -137,56 +143,59 @@ function initIscroll() { @@ -137,56 +143,59 @@ function initIscroll() {
137 cbH = $coBlock.outerHeight(); 143 cbH = $coBlock.outerHeight();
138 cbTop = $coBlock.offset().top - hH; 144 cbTop = $coBlock.offset().top - hH;
139 145
140 - myScroll.on('scroll', function() { 146 + $(window).on('scroll', function() {
  147 + console.log(1);
141 var sTop = -this.y; 148 var sTop = -this.y;
142 var classList = fixedThumbDom.className; 149 var classList = fixedThumbDom.className;
143 150
144 if (sTop <= cbTop - winH + tcH) { 151 if (sTop <= cbTop - winH + tcH) {
145 if (classList.indexOf('fixed-bottom') === -1) { 152 if (classList.indexOf('fixed-bottom') === -1) {
146 $fixedThumbContainer 153 $fixedThumbContainer
147 - .addClass('fixed-bottom')  
148 - .removeClass('hide'); 154 + .addClass('fixed-bottom')
  155 + .removeClass('hide');
149 } 156 }
150 } else if (sTop <= cbTop) { 157 } else if (sTop <= cbTop) {
151 if (classList.indexOf('hide') === -1) { 158 if (classList.indexOf('hide') === -1) {
152 $fixedThumbContainer 159 $fixedThumbContainer
153 - .addClass('hide')  
154 - .removeClass('fixed-bottom fixed-top'); 160 + .addClass('hide')
  161 + .removeClass('fixed-bottom fixed-top');
155 } 162 }
156 } else if (sTop <= cbTop + cbH - tcH) { 163 } else if (sTop <= cbTop + cbH - tcH) {
157 if (classList.indexOf('fixed-top') === -1) { 164 if (classList.indexOf('fixed-top') === -1) {
158 $fixedThumbContainer 165 $fixedThumbContainer
159 - .addClass('fixed-top')  
160 - .removeClass('hide absolute')  
161 - .css('top', ''); 166 + .addClass('fixed-top')
  167 + .removeClass('hide absolute')
  168 + .css('top', '');
162 } 169 }
163 } else if (sTop <= cbTop + cbH) { 170 } else if (sTop <= cbTop + cbH) {
164 if (classList.indexOf('absolute') === -1) { 171 if (classList.indexOf('absolute') === -1) {
165 $fixedThumbContainer 172 $fixedThumbContainer
166 - .addClass('absolute')  
167 - .removeClass('fixed-top hide'); 173 + .addClass('absolute')
  174 + .removeClass('fixed-top hide');
168 } 175 }
169 fixedThumbDom.style.top = cbTop + hH + cbH - tcH - sTop + 'px'; 176 fixedThumbDom.style.top = cbTop + hH + cbH - tcH - sTop + 'px';
170 } else if (sTop > cbTop + cbH) { 177 } else if (sTop > cbTop + cbH) {
171 if (classList.indexOf('hide') === -1) { 178 if (classList.indexOf('hide') === -1) {
172 $fixedThumbContainer 179 $fixedThumbContainer
173 - .addClass('hide')  
174 - .removeClass('absolute'); 180 + .addClass('hide')
  181 + .removeClass('absolute');
175 } 182 }
176 } 183 }
177 - $scroller.trigger('scroll'); 184 + //$scroller.trigger('scroll');
178 }); 185 });
179 } 186 }
180 187
181 -// window onload 后重新refresh iscroll  
182 -window.onload = function() {  
183 - myScroll && myScroll.refresh();  
184 -}; 188 +/*
  189 + // window onload 后重新refresh iscroll
  190 + window.onload = function() {
  191 + myScroll && myScroll.refresh();
  192 + };
185 193
186 -// 图片加载完成之后重新 refresh iscroll  
187 -$('img').on('load', function() {  
188 - myScroll && myScroll.refresh();  
189 -}); 194 + // 图片加载完成之后重新 refresh iscroll
  195 + $('img').on('load', function() {
  196 + myScroll && myScroll.refresh();
  197 + });
  198 + */
190 199
191 // 初始化页面,包括是否使用iscorll初始化页面 200 // 初始化页面,包括是否使用iscorll初始化页面
192 // 接口暴露在HTML中，使用压缩名 201 // 接口暴露在HTML中，使用压缩名
@@ -231,17 +240,19 @@ $('img').on('load', function() { @@ -231,17 +240,19 @@ $('img').on('load', function() {
231 240
232 // offset.left约等于marginLeft的值则表示介绍被换行，则清除intro的paddingTop让其更靠近头像和作者名 241 // offset.left约等于marginLeft的值则表示介绍被换行，则清除intro的paddingTop让其更靠近头像和作者名
233 if ($authorIntro.offset() && (parseInt($authorIntro.offset().left, 10) === 242 if ($authorIntro.offset() && (parseInt($authorIntro.offset().left, 10) ===
234 - parseInt($authorIntro.css('margin-left'), 10))) { 243 + parseInt($authorIntro.css('margin-left'), 10))) {
235 $authorIntro.css('padding-top', 0); 244 $authorIntro.css('padding-top', 0);
236 } 245 }
  246 + /*
237 247
238 - if (pageInIscroll) {  
239 - if ($('.yoho-header').length > 0) {  
240 - $('#wrapper').addClass('ios has-head');  
241 - } else {  
242 - $('#wrapper').addClass('ios');  
243 - }  
244 - } 248 + if (pageInIscroll) {
  249 + if ($('.yoho-header').length > 0) {
  250 + $('#wrapper').addClass('ios has-head');
  251 + } else {
  252 + $('#wrapper').addClass('ios');
  253 + }
  254 + }
  255 + */
245 256
246 // 有搭配模块，iphone使用iscroll初始化滚动并有固定的搭配栏，其他的没有 257 // 有搭配模块，iphone使用iscroll初始化滚动并有固定的搭配栏，其他的没有
247 if (hasCollocationBlock) { 258 if (hasCollocationBlock) {
@@ -270,7 +281,6 @@ $('img').on('load', function() { @@ -270,7 +281,6 @@ $('img').on('load', function() {
270 281
271 if (pageInIscroll) { 282 if (pageInIscroll) {
272 $fixedThumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt); 283 $fixedThumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);
273 -  
274 } 284 }
275 } 285 }
276 286
@@ -278,3 +288,4 @@ $('img').on('load', function() { @@ -278,3 +288,4 @@ $('img').on('load', function() {
278 initIscroll(); 288 initIscroll();
279 } 289 }
280 }()); 290 }());
  291 +
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 */ 5 */
6 6
7 var $ = require('yoho-jquery'), 7 var $ = require('yoho-jquery'),
8 - Hammer = require('yoho-hammer'), 8 + Hammer = require('../common/toy-hammer'),
9 ellipsis = require('yoho-mlellipsis'), 9 ellipsis = require('yoho-mlellipsis'),
10 lazyLoad = require('yoho-jquery-lazyload'), 10 lazyLoad = require('yoho-jquery-lazyload'),
11 Swiper = require('yoho-swiper'); 11 Swiper = require('yoho-swiper');
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 */ 5 */
6 6
7 var $ = require('yoho-jquery'), 7 var $ = require('yoho-jquery'),
8 - Hammer = require('yoho-hammer'), 8 + Hammer = require('../common/toy-hammer'),
9 ellipsis = require('yoho-mlellipsis'), 9 ellipsis = require('yoho-mlellipsis'),
10 lazyLoad = require('yoho-jquery-lazyload'); 10 lazyLoad = require('yoho-jquery-lazyload');
11 11