fe / YOHOBUYWAP · Commits

Go to a project

Authored by xuqi
Commit 314448eb3aa56864c41140afa11861b1b779ca00 1 parent f24d8428

split guang home from list

Inline Side-by-side
Showing 8 changed files with 333 additions and 60 deletions
@@ -257,7 +257,6 @@ @@ -257,7 +257,6 @@
257 ### 逛首页 257 ### 逛首页
258 258
259 { 259 {
260 - isHomePage: true,  
261 swiper: [ 260 swiper: [
262 { 261 {
263 url: '', 262 url: '',
@@ -269,13 +268,15 @@ @@ -269,13 +268,15 @@
269 { 268 {
270 typeId: 1, 269 typeId: 1,
271 type: '最新', 270 type: '最新',
272 - url: '',  
273 focus: true 271 focus: true
274 }, 272 },
275 ... 273 ...
276 ], 274 ],
277 infos: [ 275 infos: [
278 - {...}, //标签 276 + [
  277 + {...}, //资讯
  278 + ...
  279 + ],
279 ... 280 ...
280 ] 281 ]
281 } 282 }
@@ -283,10 +284,17 @@ @@ -283,10 +284,17 @@
283 ### 逛列表页 284 ### 逛列表页
284 285
285 { 286 {
286 - infos: [ 287 + infos:
  288 + [
  289 + {
  290 + show: true,
  291 + info: [
287 {...}, //标签 292 {...}, //标签
288 ... 293 ...
289 ] 294 ]
  295 + },
  296 + ...
  297 + ]
290 } 298 }
291 299
292 ### 编辑页 300 ### 编辑页
  1 +/**
  2 + * 逛首页
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/10/10
  5 + */
  6 +
  7 +var $ = require('yoho.zepto'),
  8 + Swiper = require('yoho.iswiper');
  9 +
  10 +var info = require('./info'),
  11 + setLazyLoadAndMellipsis = info.setLazyLoadAndMellipsis,
  12 + loadMore = info.loadMore;
  13 +
  14 +var winH = $(window).height(),
  15 + loadMoreH = $('#load-more').height();
  16 +
  17 +var $infoList = $('#info-list'),
  18 + $infos = $infoList.children('.info-list'),
  19 + $nav = $('#guang-nav'),
  20 + $curNav = $nav.children('.focus'),
  21 + curIndex = $curNav.index();
  22 +
  23 +var state = {};
  24 +
  25 +var mySwiper;
  26 +
  27 +mySwiper = new Swiper('.swiper-container', {
  28 + lazyLoading: true,
  29 + pagination: '.swiper-pagination'
  30 +});
  31 +
  32 +info.initInfosEvt($infoList);
  33 +
  34 +//初始化各Nav下资讯加载的状态
  35 +(function() {
  36 + $nav.children('.guang-nav-item').each(function() {
  37 + var type = $(this).data('type');
  38 +
  39 + state[type] = {
  40 + page: 1,
  41 + end: false,
  42 + type: type
  43 + };
  44 + });
  45 +}());
  46 +
  47 +$nav.delegate('.guang-nav-item', 'touchstart', function() {
  48 + var $this = $(this),
  49 + $content,
  50 + index;
  51 +
  52 + if ($this.hasClass('focus')) {
  53 + return;
  54 + }
  55 +
  56 + index = $this.index();
  57 +
  58 + $this.addClass('focus');
  59 + $curNav.removeClass('focus');
  60 +
  61 + $infos.not('.hide').addClass('hide');
  62 +
  63 + $content = $infos.eq(index);
  64 + $content.removeClass('hide');
  65 +
  66 + //lazyload & mellipsis
  67 + setLazyLoadAndMellipsis($content.children('.guang-info'));
  68 +
  69 + $curNav = $this;
  70 + curIndex = index;
  71 +});
  72 +
  73 +$(document).scroll(function() {
  74 + if (state[curIndex].end) {
  75 + return;
  76 + }
  77 +
  78 + if ($(window).scrollTop() + winH >= $(document).height() - loadMoreH) {
  79 + loadMore($infos, state[curIndex]);
  80 + }
  81 +});
@@ -15,6 +15,21 @@ var loading = false; @@ -15,6 +15,21 @@ var loading = false;
15 ellipsis.init(); 15 ellipsis.init();
16 16
17 /** 17 /**
  18 + * 设置指定资讯项的Lazyload和文字截取
  19 + * @params $infos 资讯项
  20 + */
  21 +function setLazyLoadAndMellipsis($infos) {
  22 + lazyLoad($infos.find('img.lazy'));
  23 +
  24 + $infos.each(function() {
  25 + var $this = $(this);
  26 +
  27 + $this.find('.info-title')[0].mlellipsis(2);
  28 + $this.find('.info-text')[0].mlellipsis(2);
  29 + });
  30 +}
  31 +
  32 +/**
18 * 初始化资讯列表事件绑定 33 * 初始化资讯列表事件绑定
19 * @params $container 逛资讯列表容器 34 * @params $container 逛资讯列表容器
20 */ 35 */
@@ -42,22 +57,7 @@ function initInfosEvt($container) { @@ -42,22 +57,7 @@ function initInfosEvt($container) {
42 }); 57 });
43 }); 58 });
44 59
45 - _setLazyLoadAndMellipsis($container.find('.guang-info'));  
46 -}  
47 -  
48 -/**  
49 - * 设置指定资讯项的Lazyload和文字截取  
50 - * @params $infos 资讯项  
51 - */  
52 -function _setLazyLoadAndMellipsis($infos) {  
53 - lazyLoad($infos.find('img.lazy'));  
54 -  
55 - $infos.each(function() {  
56 - var $this = $(this);  
57 -  
58 - $this.find('.info-title')[0].mlellipsis(2);  
59 - $this.find('.info-text')[0].mlellipsis(2);  
60 - }); 60 + setLazyLoadAndMellipsis($container.find('.guang-info'));
61 } 61 }
62 62
63 /** 63 /**
@@ -88,7 +88,7 @@ function loadMore($container, opt) { @@ -88,7 +88,7 @@ function loadMore($container, opt) {
88 88
89 $container.append(res.infos); 89 $container.append(res.infos);
90 $newInfos = $container.find('.guang-info:gt(' + (infosNum - 1) + ')'); 90 $newInfos = $container.find('.guang-info:gt(' + (infosNum - 1) + ')');
91 - _setLazyLoadAndMellipsis($newInfos); 91 + setLazyLoadAndMellipsis($newInfos);
92 92
93 opt.page++; 93 opt.page++;
94 } 94 }
@@ -98,4 +98,5 @@ function loadMore($container, opt) { @@ -98,4 +98,5 @@ function loadMore($container, opt) {
98 } 98 }
99 99
100 exports.initInfosEvt = initInfosEvt; 100 exports.initInfosEvt = initInfosEvt;
  101 +exports.setLazyLoadAndMellipsis = setLazyLoadAndMellipsis;
101 exports.loadMore = loadMore; 102 exports.loadMore = loadMore;
1 /** 1 /**
2 - * 逛首页,列表页，编辑页 2 + * 列表页，编辑页
3 * @author: xuqi<qi.xu@yoho.cn> 3 * @author: xuqi<qi.xu@yoho.cn>
4 * @date: 2015/10/10 4 * @date: 2015/10/10
5 */ 5 */
6 6
7 -var $ = require('yoho.zepto'),  
8 - Swiper = require('yoho.iswiper'); 7 +var $ = require('yoho.zepto');
9 8
10 var info = require('./info'), 9 var info = require('./info'),
11 loadMore = info.loadMore; 10 loadMore = info.loadMore;
@@ -18,22 +17,16 @@ var setting = { @@ -18,22 +17,16 @@ var setting = {
18 end: false 17 end: false
19 }; 18 };
20 19
21 -var $infos = $('#info-list'),  
22 - mySwiper; 20 +var $infos = $('#info-list');
23 21
24 info.initInfosEvt($infos); 22 info.initInfosEvt($infos);
25 23
26 -mySwiper = new Swiper('.swiper-container', {  
27 - lazyLoading: true,  
28 - pagination: '.swiper-pagination'  
29 -});  
30 -  
31 $(document).scroll(function() { 24 $(document).scroll(function() {
32 if (setting.end) { 25 if (setting.end) {
33 return; 26 return;
34 } 27 }
35 28
36 - if ($(window).scrollTop() + $(window).height() >= $(document).height() - loadMoreH) { 29 + if ($(window).scrollTop() + winH >= $(document).height() - loadMoreH) {
37 loadMore($infos, setting); 30 loadMore($infos, setting);
38 } 31 }
39 }); 32 });
@@ -66,13 +66,13 @@ @@ -66,13 +66,13 @@
66 padding: 0 22rem / $pxConvertRem; 66 padding: 0 22rem / $pxConvertRem;
67 line-height: 80rem / $pxConvertRem; 67 line-height: 80rem / $pxConvertRem;
68 68
69 - &.focus a { 69 + &.focus {
70 color: #000; 70 color: #000;
71 } 71 }
72 -  
73 - a {  
74 - color: #ccc;  
75 } 72 }
  73 +
  74 + .info-list.hide {
  75 + display: none;
76 } 76 }
77 77
78 .load-more-info { 78 .load-more-info {
1 {{> layout/header}} 1 {{> layout/header}}
2 <div class="guang-list-page guang-page yoho-page"> 2 <div class="guang-list-page guang-page yoho-page">
3 {{# guang}} 3 {{# guang}}
4 - {{#if isHomePage}}  
5 <div class="swiper-container"> 4 <div class="swiper-container">
6 <div class="swiper-wrapper"> 5 <div class="swiper-wrapper">
7 {{# swiper}} 6 {{# swiper}}
@@ -15,7 +14,6 @@ @@ -15,7 +14,6 @@
15 </div> 14 </div>
16 <div class="swiper-pagination"></div> 15 <div class="swiper-pagination"></div>
17 </div> 16 </div>
18 - {{/if}}  
19 17
20 {{# author}} 18 {{# author}}
21 <div id="author-infos" class="editor-header clearfix" data-id={{id}}> 19 <div id="author-infos" class="editor-header clearfix" data-id={{id}}>
@@ -29,19 +27,21 @@ @@ -29,19 +27,21 @@
29 </div> 27 </div>
30 {{/ author}} 28 {{/ author}}
31 29
32 - {{#if isHomePage}}  
33 <ul id="guang-nav" class="guang-nav clearfix"> 30 <ul id="guang-nav" class="guang-nav clearfix">
34 {{# navs}} 31 {{# navs}}
35 <li class="guang-nav-item {{#focus}}focus{{/focus}}" data-type={{typeId}}> 32 <li class="guang-nav-item {{#focus}}focus{{/focus}}" data-type={{typeId}}>
36 - <a class="pjax-link" href="{{url}}">{{type}}</a> 33 + {{type}}
37 </li> 34 </li>
38 {{/ navs}} 35 {{/ navs}}
39 </ul> 36 </ul>
40 - {{/if}}  
41 37
42 - <div id="info-list" class="info-list"> 38 + <div id="info-list">
43 {{# infos}} 39 {{# infos}}
  40 + <div class="info-list {{^show}}hide{{/show}}">
  41 + {{# info}}
44 {{> guang/info}} 42 {{> guang/info}}
  43 + {{/ info}}
  44 + </div>
45 {{/ infos}} 45 {{/ infos}}
46 </div> 46 </div>
47 47
  1 +{{> layout/header}}
  2 +<div class="guang-list-page guang-page yoho-page">
  3 + {{# guang}}
  4 + {{# author}}
  5 + <div id="author-infos" class="editor-header clearfix" data-id={{id}}>
  6 + <div class="avatar">
  7 + <img src="{{avatar}}">
  8 + </div>
  9 + <div class="text">
  10 + <p class="name">{{name}}</p>
  11 + <p class="info">{{info}}</p>
  12 + </div>
  13 + </div>
  14 + {{/ author}}
  15 +
  16 + <div id="info-list" class="info-list">
  17 + {{# infos}}
  18 + {{> guang/info}}
  19 + {{/ infos}}
  20 + </div>
  21 +
  22 + <div id="load-more-info" class="load-more-info">
  23 + <div class="loading status">
  24 + 正在加载...
  25 + </div>
  26 + <span class="no-more status hide">没有更多啦</span>
  27 + </div>
  28 + {{/ guang}}
  29 +</div>
  30 +{{> layout/footer}}
@@ -6,14 +6,12 @@ use Action\AbstractAction; @@ -6,14 +6,12 @@ use Action\AbstractAction;
6 */ 6 */
7 class ListController extends AbstractAction 7 class ListController extends AbstractAction
8 { 8 {
9 -  
10 /** 9 /**
11 * 首页 10 * 首页
12 */ 11 */
13 public function indexAction() 12 public function indexAction()
14 { 13 {
15 $data = array( 14 $data = array(
16 - 'isHomePage' => true,  
17 'swiper' => array( 15 'swiper' => array(
18 array( 16 array(
19 'url' => '', 17 'url' => '',
@@ -27,38 +25,34 @@ class ListController extends AbstractAction @@ -27,38 +25,34 @@ class ListController extends AbstractAction
27 'navs' => array( 25 'navs' => array(
28 array( 26 array(
29 'typeId' => 1, 27 'typeId' => 1,
30 - 'type' => '最新',  
31 - 'url' => '/guang/index' 28 + 'type' => '最新'
32 ), 29 ),
33 array( 30 array(
34 'typeId' => 2, 31 'typeId' => 2,
35 'type' => '话题', 32 'type' => '话题',
36 - 'focus' => true,  
37 - 'url' => '/guang/index' 33 + 'focus' => true
38 ), 34 ),
39 array( 35 array(
40 'typeId' => 3, 36 'typeId' => 3,
41 - 'type' => '搭配',  
42 - 'url' => '/guang/index' 37 + 'type' => '搭配'
43 ), 38 ),
44 array( 39 array(
45 'typeId' => 4, 40 'typeId' => 4,
46 - 'type' => '潮人',  
47 - 'url' => '/guang/index' 41 + 'type' => '潮人'
48 ), 42 ),
49 array( 43 array(
50 'typeId' => 5, 44 'typeId' => 5,
51 - 'type' => '潮物',  
52 - 'url' => '/guang/index' 45 + 'type' => '潮物'
53 ), 46 ),
54 array( 47 array(
55 'typeId' => 6, 48 'typeId' => 6,
56 - 'type' => '小贴士',  
57 - 'url' => '/guang/index' 49 + 'type' => '小贴士'
58 ) 50 )
59 ), 51 ),
60 'infos' => array( 52 'infos' => array(
61 array( 53 array(
  54 + 'info' => array(
  55 + array(
62 'id' => 1, 56 'id' => 1,
63 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png', 57 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
64 'title' => '1.副线不知为何总是好看点', 58 'title' => '1.副线不知为何总是好看点',
@@ -93,8 +87,155 @@ class ListController extends AbstractAction @@ -93,8 +87,155 @@ class ListController extends AbstractAction
93 'url' => '', 87 'url' => '',
94 'likeUrl' => '', 88 'likeUrl' => '',
95 'isTip' => true 89 'isTip' => true
  90 + )
  91 + )
  92 + ),
  93 + array(
  94 + 'show' => true,
  95 + 'info' => array(
  96 + array(
  97 + 'id' => 2,
  98 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  99 + 'title' => '2.副线不知为何总是好看点测试长度是否会被截取塞真的很恶心啊',
  100 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  101 + 'In England中Panul Smith缔造了一个传奇',
  102 + 'showTags' => false,
  103 + 'publishTime' => '2月13日 12:34',
  104 + 'pageView' => 3445,
  105 + 'like' => array(
  106 + 'count' => 100,
  107 + 'isLiked' => false
  108 + ),
  109 + 'share' => true,
  110 + 'url' => '',
  111 + 'likeUrl' => '',
  112 + 'isFashionGood' => true
  113 + )
  114 + )
  115 + ),
  116 + array(
  117 + 'info' => array(
  118 + array(
  119 + 'id' => 2,
  120 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  121 + 'title' => '2.副线不知为何总是好看点测试长度是否会被截取塞真的很恶心啊',
  122 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  123 + 'In England中Panul Smith缔造了一个传奇',
  124 + 'showTags' => false,
  125 + 'publishTime' => '2月13日 12:34',
  126 + 'pageView' => 3445,
  127 + 'like' => array(
  128 + 'count' => 100,
  129 + 'isLiked' => false
  130 + ),
  131 + 'share' => true,
  132 + 'url' => '',
  133 + 'likeUrl' => '',
  134 + 'isFashionGood' => true
  135 + ),
  136 + array(
  137 + 'id' => 1,
  138 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  139 + 'title' => '1.副线不知为何总是好看点',
  140 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  141 + 'In England中Panul Smith缔造了一个传奇',
  142 + 'showTags' => true,
  143 + 'publishTime' => '2月13日 12:34',
  144 + 'pageView' => 3445,
  145 + 'like' => array(
  146 + 'count' => 459,
  147 + 'isLiked' => true
  148 + ),
  149 + 'share' => true,
  150 + 'url' => '',
  151 + 'likeUrl' => '',
  152 + 'isTip' => true
  153 + )
  154 + )
  155 + ),
  156 + array(
  157 + 'info' => array(
  158 + array(
  159 + 'id' => 2,
  160 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  161 + 'title' => '2.副线不知为何总是好看点测试长度是否会被截取塞真的很恶心啊',
  162 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  163 + 'In England中Panul Smith缔造了一个传奇',
  164 + 'showTags' => false,
  165 + 'publishTime' => '2月13日 12:34',
  166 + 'pageView' => 3445,
  167 + 'like' => array(
  168 + 'count' => 100,
  169 + 'isLiked' => false
  170 + ),
  171 + 'share' => true,
  172 + 'url' => '',
  173 + 'likeUrl' => '',
  174 + 'isFashionGood' => true
  175 + ),
  176 + array(
  177 + 'id' => 1,
  178 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  179 + 'title' => '1.副线不知为何总是好看点',
  180 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  181 + 'In England中Panul Smith缔造了一个传奇',
  182 + 'showTags' => true,
  183 + 'publishTime' => '2月13日 12:34',
  184 + 'pageView' => 3445,
  185 + 'like' => array(
  186 + 'count' => 459,
  187 + 'isLiked' => true
  188 + ),
  189 + 'share' => true,
  190 + 'url' => '',
  191 + 'likeUrl' => '',
  192 + 'isTip' => true
  193 + )
  194 + )
  195 + ),
  196 + array(
  197 + 'info' => array(
  198 + array(
  199 + 'id' => 2,
  200 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  201 + 'title' => '2.副线不知为何总是好看点测试长度是否会被截取塞真的很恶心啊',
  202 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  203 + 'In England中Panul Smith缔造了一个传奇',
  204 + 'showTags' => false,
  205 + 'publishTime' => '2月13日 12:34',
  206 + 'pageView' => 3445,
  207 + 'like' => array(
  208 + 'count' => 100,
  209 + 'isLiked' => false
  210 + ),
  211 + 'share' => true,
  212 + 'url' => '',
  213 + 'likeUrl' => '',
  214 + 'isFashionGood' => true
  215 + ),
  216 + array(
  217 + 'id' => 1,
  218 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  219 + 'title' => '1.副线不知为何总是好看点',
  220 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  221 + 'In England中Panul Smith缔造了一个传奇',
  222 + 'showTags' => true,
  223 + 'publishTime' => '2月13日 12:34',
  224 + 'pageView' => 3445,
  225 + 'like' => array(
  226 + 'count' => 459,
  227 + 'isLiked' => true
  228 + ),
  229 + 'share' => true,
  230 + 'url' => '',
  231 + 'likeUrl' => '',
  232 + 'isTip' => true
  233 + )
  234 + )
96 ), 235 ),
97 array( 236 array(
  237 + 'info' => array(
  238 + array(
98 'id' => 2, 239 'id' => 2,
99 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png', 240 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
100 'title' => '2.副线不知为何总是好看点测试长度是否会被截取塞真的很恶心啊', 241 'title' => '2.副线不知为何总是好看点测试长度是否会被截取塞真的很恶心啊',
@@ -111,11 +252,31 @@ class ListController extends AbstractAction @@ -111,11 +252,31 @@ class ListController extends AbstractAction
111 'url' => '', 252 'url' => '',
112 'likeUrl' => '', 253 'likeUrl' => '',
113 'isFashionGood' => true 254 'isFashionGood' => true
  255 + ),
  256 + array(
  257 + 'id' => 1,
  258 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  259 + 'title' => '1.副线不知为何总是好看点',
  260 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  261 + 'In England中Panul Smith缔造了一个传奇',
  262 + 'showTags' => true,
  263 + 'publishTime' => '2月13日 12:34',
  264 + 'pageView' => 3445,
  265 + 'like' => array(
  266 + 'count' => 459,
  267 + 'isLiked' => true
  268 + ),
  269 + 'share' => true,
  270 + 'url' => '',
  271 + 'likeUrl' => '',
  272 + 'isTip' => true
  273 + )
  274 + )
114 ) 275 )
115 ) 276 )
116 ); 277 );
117 $this->_view->assign('title', 'YOHO!有货'); 278 $this->_view->assign('title', 'YOHO!有货');
118 - $this->_view->display('index', array('modulePath' => 'guang/list', 'guang' => $data)); 279 + $this->_view->display('index', array('modulePath' => 'guang/home', 'guang' => $data));
119 } 280 }
120 281
121 /** 282 /**
@@ -182,7 +343,7 @@ class ListController extends AbstractAction @@ -182,7 +343,7 @@ class ListController extends AbstractAction
182 ) 343 )
183 ); 344 );
184 $this->_view->assign('title', 'YOHO!有货'); 345 $this->_view->assign('title', 'YOHO!有货');
185 - $this->_view->display('index', array('modulePath' => 'guang/list', 'guang' => $data)); 346 + $this->_view->display('list', array('modulePath' => 'guang/list', 'guang' => $data));
186 } 347 }
187 348
188 /** 349 /**
@@ -254,7 +415,6 @@ class ListController extends AbstractAction @@ -254,7 +415,6 @@ class ListController extends AbstractAction
254 ) 415 )
255 ); 416 );
256 $this->_view->assign('title', 'YOHO!有货'); 417 $this->_view->assign('title', 'YOHO!有货');
257 - $this->_view->display('index', array('modulePath' => 'guang/list', 'guang' => $data)); 418 + $this->_view->display('list', array('modulePath' => 'guang/list', 'guang' => $data));
258 } 419 }
259 -  
260 } 420 }