fe / yohobuywap-node · Commits

Go to a project

Authored by 王水玲
Commit 42a09e00904ffccc2bb487a0bb03ce52b5afbbf7 1 parent fbbb69d6

星潮教室优化，去除下拉刷新

Inline Side-by-side
Showing 6 changed files with 109 additions and 194 deletions
@@ -24,8 +24,6 @@ const headTab = [ @@ -24,8 +24,6 @@ const headTab = [
24 } 24 }
25 ]; 25 ];
26 26
27 -let md5Str = '';  
28 -  
29 const _processPublicData = (req, title) => { 27 const _processPublicData = (req, title) => {
30 let renderData = { 28 let renderData = {
31 module: 'guang', 29 module: 'guang',
@@ -51,7 +49,6 @@ let index = (req, res, next) => { @@ -51,7 +49,6 @@ let index = (req, res, next) => {
51 pageHeadTab[0].cur = true; 49 pageHeadTab[0].cur = true;
52 50
53 starModel.getIndexData().then((result) => { 51 starModel.getIndexData().then((result) => {
54 - md5Str = result.md5;  
55 res.render('star/index', _.assign({ 52 res.render('star/index', _.assign({
56 page: 'star', 53 page: 'star',
57 isStarIndexPage: true, 54 isStarIndexPage: true,
@@ -61,31 +58,24 @@ let index = (req, res, next) => { @@ -61,31 +58,24 @@ let index = (req, res, next) => {
61 data: result.ads 58 data: result.ads
62 }, 59 },
63 starAvatar: result.starAvatar ? result.starAvatar : '', 60 starAvatar: result.starAvatar ? result.starAvatar : '',
64 - articles: result.articles,  
65 - md5: result.md5 61 + articles: result.articles
66 }, _processPublicData(req, '星潮教室'))); 62 }, _processPublicData(req, '星潮教室')));
67 }).catch(next); 63 }).catch(next);
68 }; 64 };
69 65
70 -let getIndexHtml = (req, res, next) => {  
71 - starModel.getIndexData().then((result) => {  
72 - if (md5Str !== result.md5) {  
73 - md5Str = result.md5;  
74 -  
75 - res.render('star/index-html', _.assign({  
76 - layout: false,  
77 - content: {  
78 - focus: true,  
79 - data: result.ads  
80 - },  
81 - starAvatar: result.starAvatar ? result.starAvatar : '',  
82 - articles: result.articles  
83 - }));  
84 - } else {  
85 - res.json();  
86 - }  
87 - }).catch(next);  
88 -}; 66 +// let getIndexHtml = (req, res, next) => {
  67 +// starModel.getIndexData().then((result) => {
  68 +// res.render('star/index-html', _.assign({
  69 +// layout: false,
  70 +// content: {
  71 +// focus: true,
  72 +// data: result.ads
  73 +// },
  74 +// starAvatar: result.starAvatar ? result.starAvatar : '',
  75 +// articles: result.articles
  76 +// }));
  77 +// }).catch(next);
  78 +// };
89 79
90 /** 80 /**
91 * 星专题 81 * 星专题
@@ -214,7 +204,6 @@ let detailList = (req, res, next) => { @@ -214,7 +204,6 @@ let detailList = (req, res, next) => {
214 204
215 module.exports = { 205 module.exports = {
216 index, 206 index,
217 - getIndexHtml,  
218 special, 207 special,
219 collocation, 208 collocation,
220 collocationList, 209 collocationList,
@@ -13,7 +13,6 @@ const star = require(cRoot + '/star'); @@ -13,7 +13,6 @@ const star = require(cRoot + '/star');
13 const router = express.Router(); // eslint-disable-line 13 const router = express.Router(); // eslint-disable-line
14 14
15 router.get('/star', star.index); // 星潮教室首页 15 router.get('/star', star.index); // 星潮教室首页
16 -router.get('/star/getIndexHtml', star.getIndexHtml); // 星潮教室首页  
17 router.get('/star/detail', star.detail); // 明星文章专区 16 router.get('/star/detail', star.detail); // 明星文章专区
18 router.get('/star/detailList', star.detailList); // 明星文章专区文章Ajax请求 17 router.get('/star/detailList', star.detailList); // 明星文章专区文章Ajax请求
19 router.get('/star/special', star.special); // 星潮教室星专题 18 router.get('/star/special', star.special); // 星潮教室星专题
1 <div class="star-page yoho-page"> 1 <div class="star-page yoho-page">
2 {{> star/head-tab}} 2 {{> star/head-tab}}
3 - <div class="loading-tip">下拉刷新</div>  
4 <div class="star-main"> 3 <div class="star-main">
5 - <div class="main-content">  
6 - {{> star/index-html}}  
7 - </div> 4 + {{> star/index-html}}
8 </div> 5 </div>
9 </div> 6 </div>
1 <div class="star-wrap"> 1 <div class="star-wrap">
2 - <div class="star-content">  
3 - {{#content}}  
4 - {{#if focus}}  
5 - {{> resources/banner-top}}  
6 - {{/if}}  
7 - {{/content}} 2 + {{#content}}
  3 + {{#if focus}}
  4 + {{> resources/banner-top}}
  5 + {{/if}}
  6 + {{/content}}
8 7
9 - <div class="avatar-wrap">  
10 - <div class="avatar-swiper avatar">  
11 - <ul class="clearfix swiper-wrapper">  
12 - {{# starAvatar}}  
13 - <li class="swiper-slide">  
14 - <a href='{{url}}' style="background-image: url({{image cover 180 180}})" class="star"></a>  
15 - </li>  
16 - {{/ starAvatar}}  
17 - </ul>  
18 - </div> 8 + <div class="avatar-wrap">
  9 + <div class="avatar-swiper avatar">
  10 + <ul class="clearfix swiper-wrapper">
  11 + {{# starAvatar}}
  12 + <li class="swiper-slide">
  13 + <a href='{{url}}' style="background-image: url({{image cover 180 180}})" class="star"></a>
  14 + </li>
  15 + {{/ starAvatar}}
  16 + </ul>
19 </div> 17 </div>
  18 + </div>
20 19
21 - <ul class="star-info clearfix">  
22 - {{#each articles}}  
23 - <li data-id="{{id}}">  
24 - <div class="star-avatar">  
25 - {{#if isSwiper}}  
26 - <div class="article-avatar-swiper">  
27 - <ul class="clearfix swiper-wrapper">  
28 - {{#each tags}}  
29 - <li class="swiper-slide">  
30 - <a href='{{avatarUrl}}'>  
31 - <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>  
32 - <p class="name">{{tagName}}</p>  
33 - </a>  
34 - </li>  
35 - {{/each}}  
36 - </ul>  
37 - </div>  
38 - {{else}}  
39 - {{# tags}}  
40 - <a href="{{avatarUrl}}">  
41 - <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>  
42 - <p class="name">{{tagName}}</p>  
43 - </a>  
44 - {{/ tags}}  
45 - {{/if}}  
46 - </div>  
47 - <a class="star-article" href='{{url}}'>  
48 - <i class="article-arrow"></i>  
49 - <h2 class="article-title">{{title}}</h2>  
50 - <div class="artice-cont">  
51 - <p>{{articeTxt}}</p>  
52 - <div class="artice-imgs-area">  
53 - <img src="{{image src 266 266}}" /> 20 + <ul class="star-info">
  21 + {{#each articles}}
  22 + <li data-id="{{id}}">
  23 + <div class="star-avatar">
  24 + {{#if isSwiper}}
  25 + <div class="article-avatar-swiper">
  26 + <ul class="clearfix swiper-wrapper">
  27 + {{#each tags}}
  28 + <li class="swiper-slide">
  29 + <a href='{{avatarUrl}}'>
  30 + <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>
  31 + <p class="name">{{tagName}}</p>
  32 + </a>
  33 + </li>
  34 + {{/each}}
  35 + </ul>
  36 + </div>
  37 + {{else}}
  38 + {{# tags}}
  39 + <a href="{{avatarUrl}}">
  40 + <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>
  41 + <p class="name">{{tagName}}</p>
  42 + </a>
  43 + {{/ tags}}
  44 + {{/if}}
  45 + </div>
  46 + <a class="star-article" href='{{url}}'>
  47 + <i class="article-arrow"></i>
  48 + <h2 class="article-title">{{title}}</h2>
  49 + <div class="artice-cont">
  50 + <p>{{articeTxt}}</p>
  51 + <div class="artice-imgs-area">
  52 + <img data-original="{{image src 266 266}}" class="lazy"/>
54 53
55 - {{!-- <ul class="artice-imgs">  
56 - {{#each articeImg}}  
57 - <li><img src="{{image . 640 640}}" /></li>  
58 - {{/each}}  
59 - </ul> --}} 54 + {{!-- <ul class="artice-imgs">
  55 + {{#each articeImg}}
  56 + <li><img src="{{image . 640 640}}" /></li>
  57 + {{/each}}
  58 + </ul> --}}
60 59
61 - </div>  
62 - </div>  
63 - <div class="artice-o">  
64 - <span class="time"><i class="iconfont time-ico">&#xe603;</i>{{publishTime}}</span>  
65 - <span class="see"><i class="iconfont see-ico">&#xe602;</i>{{viewsNum}}</span>  
66 </div> 60 </div>
67 - </a>  
68 - </li>  
69 - {{/each}}  
70 - </ul>  
71 - </div> 61 + </div>
  62 + <div class="artice-o">
  63 + <span class="time"><i class="iconfont time-ico">&#xe603;</i>{{publishTime}}</span>
  64 + <span class="see"><i class="iconfont see-ico">&#xe602;</i>{{viewsNum}}</span>
  65 + </div>
  66 + </a>
  67 + </li>
  68 + {{/each}}
  69 + </ul>
72 </div> 70 </div>
73 71
74 {{!-- <div class="view-img"> 72 {{!-- <div class="view-img">
@@ -13,15 +13,13 @@ var $ = require('yoho-jquery'), @@ -13,15 +13,13 @@ var $ = require('yoho-jquery'),
13 PullRefresh = require('../plugin/pull-refresh'); 13 PullRefresh = require('../plugin/pull-refresh');
14 14
15 var $window = $(window), 15 var $window = $(window),
16 - stopLoading = false,  
17 - $mainContent = $('.main-content'),  
18 - $headTab = $('.head-tab'),  
19 - headTabH = $headTab.height(),  
20 - scrollH = $(window).height() - headTabH,  
21 - $loadingTip = $('.loading-tip'), 16 + $starMain = $('.star-main'),
  17 + $bannerTop = $('.banner-top'),
  18 + $starArticle = $('.star-article'),
  19 + $avatarWrap = $('.avatar-wrap'),
  20 + bannerLen = $('.avatar-wrap').find('.swiper-slide').length,
22 u = navigator.userAgent, 21 u = navigator.userAgent,
23 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 22 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
24 -  
25 /* 23 /*
26 $swiperView = $('.swiper-view'), 24 $swiperView = $('.swiper-view'),
27 $viewImg = $('.view-img'), 25 $viewImg = $('.view-img'),
@@ -32,22 +30,19 @@ var $window = $(window), @@ -32,22 +30,19 @@ var $window = $(window),
32 var mySwiper; 30 var mySwiper;
33 */ 31 */
34 32
35 -var avatarKey, bannerLen, res, avatarSwiper, avatarSwiperClone, getIndexHtml,  
36 - $avatarClone, $starArticle, $avatarWrap, starIScroll; 33 +var res, avatarSwiper, avatarSwiperClone, $avatarClone;
37 34
38 var swiperNum = $('.avatar-wrap .swiper-slide').width() / 2; 35 var swiperNum = $('.avatar-wrap .swiper-slide').width() / 2;
39 36
  37 +require('../common');
  38 +
40 if ($window.width() === 375 && isiOS) { 39 if ($window.width() === 375 && isiOS) {
41 swiperNum = 32; 40 swiperNum = 32;
42 } 41 }
43 42
44 -require('../common');  
45 -  
46 lazyLoad($('img.lazy')); 43 lazyLoad($('img.lazy'));
47 ellipsis.init(); 44 ellipsis.init();
48 45
49 -$window.on('mousewheel', false);  
50 -  
51 // 限制标题字数 46 // 限制标题字数
52 function txtLimit(dom, item1, item2) { 47 function txtLimit(dom, item1, item2) {
53 var $title = dom.find(item1), 48 var $title = dom.find(item1),
@@ -79,7 +74,7 @@ function setAvatar($userAvatar) { @@ -79,7 +74,7 @@ function setAvatar($userAvatar) {
79 74
80 // 明星头像点击居中显示或跳转 75 // 明星头像点击居中显示或跳转
81 function bindAvatar(dom) { 76 function bindAvatar(dom) {
82 - avatarKey = dom.index(); 77 + var avatarKey = dom.index();
83 78
84 if (!dom.hasClass('swiper-slide-active')) { 79 if (!dom.hasClass('swiper-slide-active')) {
85 if (avatarKey >= (2 * bannerLen + 1)) { 80 if (avatarKey >= (2 * bannerLen + 1)) {
@@ -97,7 +92,16 @@ function bindAvatar(dom) { @@ -97,7 +92,16 @@ function bindAvatar(dom) {
97 } 92 }
98 } 93 }
99 94
100 -function setIndexAction() { 95 +// 初始化首页各种效果
  96 +function initAction() {
  97 + $starMain.before($('.avatar-swiper').clone().addClass('avatar-clone').hide());
  98 + $avatarClone = $('.avatar-clone');
  99 +
  100 + // 限制标题字数
  101 + $('.cont-area').each(function() {
  102 + txtLimit($(this), '.title', '.cont-txt');
  103 + });
  104 +
101 $('.avatar').each(function(key, item) { 105 $('.avatar').each(function(key, item) {
102 $(item).addClass('avatar-' + key); 106 $(item).addClass('avatar-' + key);
103 }); 107 });
@@ -164,85 +168,12 @@ function setIndexAction() { @@ -164,85 +168,12 @@ function setIndexAction() {
164 return false; 168 return false;
165 }); 169 });
166 170
167 - $('img').on('load', function() {  
168 - starIScroll.iScroll.refresh();  
169 - }); 171 + cloneAvatarInit();
170 } 172 }
171 173
172 -function initAction() {  
173 - $starArticle = $('.star-article');  
174 - $avatarWrap = $('.avatar-wrap');  
175 - bannerLen = $('.avatar-wrap').find('.swiper-slide').length;  
176 -  
177 - if ($avatarClone) {  
178 - $avatarClone.remove();  
179 - }  
180 -  
181 - $loadingTip.before($('.avatar-swiper').clone().addClass('avatar-clone').hide());  
182 -  
183 - $avatarClone = $('.avatar-clone');  
184 -  
185 - // 限制标题字数  
186 - $('.cont-area').each(function() {  
187 - txtLimit($(this), '.title', '.cont-txt');  
188 - });  
189 -  
190 - lazyLoad($('img.lazy'));  
191 -  
192 - setIndexAction();  
193 -}  
194 -  
195 -  
196 -// 首页数据请求  
197 -getIndexHtml = function() {  
198 - loading.showLoadingMask();  
199 - $.ajax({  
200 - url: '/guang/star/getIndexHtml',  
201 - dataType: 'html',  
202 - success: function(data) {  
203 - stopLoading = false;  
204 -  
205 - if (data) {  
206 - if (avatarSwiperClone) {  
207 - avatarSwiperClone.destroy(true, true);  
208 - avatarSwiperClone = '';  
209 - }  
210 -  
211 - $mainContent.html(data);  
212 -  
213 - initAction();  
214 - }  
215 -  
216 - loading.hideLoadingMask();  
217 - },  
218 - error: function() {  
219 - tip.show('网络断开连接了~');  
220 - }  
221 - });  
222 -};  
223 -  
224 -initAction();  
225 -  
226 -// 下拉刷新，上拉加载  
227 -starIScroll = new PullRefresh('.star-main', {  
228 - height: scrollH,  
229 - pullDown: function() {  
230 - if (!stopLoading) {  
231 - stopLoading = true;  
232 - getIndexHtml();  
233 - }  
234 - }  
235 -});  
236 -  
237 -starIScroll.iScroll.on('scrollStart', function() {  
238 - // 下拉  
239 - if (this.directionY === -1) {  
240 - $loadingTip.slideDown();  
241 - }  
242 -});  
243 -  
244 -starIScroll.iScroll.on('scroll', function() {  
245 - if ($avatarWrap.offset().top <= headTabH) { 174 +// 悬浮明星头像
  175 +function cloneAvatarInit() {
  176 + if ($window.scrollTop() >= $bannerTop.height() + parseInt($starMain.find('.avatar').css('margin-top'))) {
246 $avatarClone.show(); 177 $avatarClone.show();
247 178
248 if (!avatarSwiperClone) { 179 if (!avatarSwiperClone) {
@@ -267,15 +198,16 @@ starIScroll.iScroll.on('scroll', function() { @@ -267,15 +198,16 @@ starIScroll.iScroll.on('scroll', function() {
267 avatarSwiperClone.params.control = avatarSwiper; 198 avatarSwiperClone.params.control = avatarSwiper;
268 avatarSwiper.params.control = avatarSwiperClone; 199 avatarSwiper.params.control = avatarSwiperClone;
269 } 200 }
270 - }  
271 -  
272 - if ($avatarWrap.offset().top > $('.avatar-1')[0].scrollHeight) { 201 + } else {
273 $avatarClone.hide(); 202 $avatarClone.hide();
274 } 203 }
275 -}); 204 +}
  205 +
  206 +
  207 +initAction();
276 208
277 -starIScroll.iScroll.on('scrollEnd', function() {  
278 - $loadingTip.slideUp(); 209 +$window.scroll(function() {
  210 + cloneAvatarInit();
279 }); 211 });
280 212
281 window.setCookie('guangStarUid', window.queryString.uid); 213 window.setCookie('guangStarUid', window.queryString.uid);
@@ -56,7 +56,7 @@ @@ -56,7 +56,7 @@
56 } 56 }
57 } 57 }
58 58
59 - .star-content { 59 + .star-wrap {
60 background: #000; 60 background: #000;
61 } 61 }
62 62
@@ -418,7 +418,7 @@ @@ -418,7 +418,7 @@
418 418
419 .star-index-bg { 419 .star-index-bg {
420 background: #000; 420 background: #000;
421 - overflow: hidden; 421 + /*overflow: hidden;*/
422 422
423 .star-page { 423 .star-page {
424 background: #000; 424 background: #000;