fe / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit f24d84287deeb3c8a14d51a26e0e70c6cbb6254e 1 parent a85b1ebb

guang-list/editor/index

Inline Side-by-side
Showing 9 changed files with 494 additions and 10 deletions
... ... @@ -308,6 +308,7 @@
{
id: '',
author: {
id: 1,
avatar: '',
name: '',
intro: '',
... ...
... ... @@ -10,6 +10,8 @@ var $ = require('yoho.zepto'),
var tip = require('../plugin/tip');
var loading = false;
ellipsis.init();
/**
... ... @@ -39,13 +41,15 @@ function initInfosEvt($container) {
tip.show('网络断开连接了~');
});
});
_setLazyLoadAndMellipsis($container.find('.guang-info'));
}
/**
* 设置指定资讯项的Lazyload和文字截取
* @params $infos 资讯项
*/
function setLazyLoadAndMellipsis($infos) {
function _setLazyLoadAndMellipsis($infos) {
lazyLoad($infos.find('img.lazy'));
$infos.each(function() {
... ... @@ -56,5 +60,42 @@ function setLazyLoadAndMellipsis($infos) {
});
}
/**
* 资讯LoadMore
*/
function loadMore($container, opt) {
var infosNum = $container.find('.guang-info').length;
if (loading) {
return;
}
loading = true;
$.ajax({
type: 'GET',
url: '/infos/get',
data: opt
}).then(function(data) {
var res,
$newInfos;
if (data.code === 200) {
res = data.data;
if (res.end) {
opt.end = true;
}
$container.append(res.infos);
$newInfos = $container.find('.guang-info:gt(' + (infosNum - 1) + ')');
_setLazyLoadAndMellipsis($newInfos);
opt.page++;
}
loading = false;
});
}
exports.initInfosEvt = initInfosEvt;
exports.setLazyLoadAndMellipsis = setLazyLoadAndMellipsis;
\ No newline at end of file
exports.loadMore = loadMore;
\ No newline at end of file
... ...
/**
* 逛首页,列表页，编辑页
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/10
*/
var $ = require('yoho.zepto'),
Swiper = require('yoho.iswiper');
var info = require('./info'),
loadMore = info.loadMore;
var winH = $(window).height(),
loadMoreH = $('#load-more').height();
var setting = {
page: 1,
end: false
};
var $infos = $('#info-list'),
mySwiper;
info.initInfosEvt($infos);
mySwiper = new Swiper('.swiper-container', {
lazyLoading: true,
pagination: '.swiper-pagination'
});
$(document).scroll(function() {
if (setting.end) {
return;
}
if ($(window).scrollTop() + $(window).height() >= $(document).height() - loadMoreH) {
loadMore($infos, setting);
}
});
\ No newline at end of file
... ...
... ... @@ -31,7 +31,6 @@ setTimeout(function() {
});
info.initInfosEvt($infosContainer);
info.setLazyLoadAndMellipsis($infosContainer.find('.guang-info'));
//文字介绍收起与展开
$('#more-intro').bind('touchstart', function() {
... ...
@import "tvls", "info", "plus-star";
\ No newline at end of file
@import "tvls", "info", "plus-star", "info-list";
\ No newline at end of file
... ...
.guang-list-page {
.editor-header {
margin-bottom: 30rem / $pxConvertRem;
padding-top: 36rem / $pxConvertRem;
padding-bottom: 40rem / $pxConvertRem;
background: #fff;
border-bottom: 1px solid #e0e0e0;
}
.avatar {
float: left;
margin-left: 30rem / $pxConvertRem;
img {
width: 100rem / $pxConvertRem;
height: 100rem / $pxConvertRem;
@include border-radius(50%);
}
}
.text {
float: left;
margin-left: 32rem / $pxConvertRem;
width: 475rem / $pxConvertRem;
.name {
font-size: 32rem / $pxConvertRem;
line-height: 40rem / $pxConvertRem;
}
.info {
margin-top: 6rem / $pxConvertRem;
color: #bdbdbf;
font-size: 24rem / $pxConvertRem;
line-height: 32rem / $pxConvertRem;
}
}
.swiper-container {
width: 100%;
height: 310rem / $pxConvertRem;
img {
height: 100%;
width: 100%;
}
.swiper-pagination {
bottom: 0;
left: 0;
width: 100%;
}
.swiper-pagination-bullet-active {
background: #fff;
}
}
.guang-nav {
background-color: #fff;
overflow: hidden;
height: 80rem / $pxConvertRem;
}
.guang-nav-item {
float: left;
color: #ccc;
font-size: 28rem / $pxConvertRem;
padding: 0 22rem / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
&.focus a {
color: #000;
}
a {
color: #ccc;
}
}
.load-more-info {
width: 100%;
height: 70rem / $pxConvertRem;
line-height: 70rem / $pxConvertRem;
text-align: center;
font-size: 14px;
overflow: hidden;
.status {
&.hide {
display: none;
}
}
}
}
\ No newline at end of file
... ...
.guang-info {
margin: 30rem / $pxConvertRem 0 0 0;
margin-bottom: 30rem / $pxConvertRem;
padding: 0 0 24rem / $pxConvertRem 0;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
background: #fff;
&:last-child {
margin-bottom: 0;
}
.info-img {
position: relative;
width: 100%;
... ... @@ -29,7 +33,7 @@
text-decoration: none;
}
.tag-tag {
.info-tag {
position: absolute;
top: 0;
left: 105rem / $pxConvertRem;
... ...
{{> layout/header}}
<div class="guang-list-page guang-page yoho-page">
{{# guang}}
{{#if isHomePage}}
<div class="swiper-container">
<div class="swiper-wrapper">
{{# swiper}}
<div class="swiper-slide">
<a href="{{url}}">
<img class="swiper-lazy" data-src="{{img}}">
</a>
<div class="swiper-lazy-preloader"></div>
</div>
{{/ swiper}}
</div>
<div class="swiper-pagination"></div>
</div>
{{/if}}
{{# author}}
<div id="author-infos" class="editor-header clearfix" data-id={{id}}>
<div class="avatar">
<img src="{{avatar}}">
</div>
<div class="text">
<p class="name">{{name}}</p>
<p class="info">{{info}}</p>
</div>
</div>
{{/ author}}
{{#if isHomePage}}
<ul id="guang-nav" class="guang-nav clearfix">
{{# navs}}
<li class="guang-nav-item {{#focus}}focus{{/focus}}" data-type={{typeId}}>
<a class="pjax-link" href="{{url}}">{{type}}</a>
</li>
{{/ navs}}
</ul>
{{/if}}
<div id="info-list" class="info-list">
{{# infos}}
{{> guang/info}}
{{/ infos}}
</div>
<div id="load-more-info" class="load-more-info">
<div class="loading status">
正在加载...
</div>
<span class="no-more status hide">没有更多啦</span>
</div>
{{/ guang}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
<?php
use Action\AbstractAction;
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
/**
* 逛首页、列表页、编辑页
*/
class ListController extends AbstractAction
{
/**
* 首页
*/
public function indexAction()
{
$data = array(
'isHomePage' => true,
'swiper' => array(
array(
'url' => '',
'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
),
array(
'url' => '',
'img' => 'http://img10.static.yhbimg.com/yhb-img01/2015/07/03/13/01a165dd33db8488edc741241950a596a8.jpg?imageView/2/w/640/h/640'
)
),
'navs' => array(
array(
'typeId' => 1,
'type' => '最新',
'url' => '/guang/index'
),
array(
'typeId' => 2,
'type' => '话题',
'focus' => true,
'url' => '/guang/index'
),
array(
'typeId' => 3,
'type' => '搭配',
'url' => '/guang/index'
),
array(
'typeId' => 4,
'type' => '潮人',
'url' => '/guang/index'
),
array(
'typeId' => 5,
'type' => '潮物',
'url' => '/guang/index'
),
array(
'typeId' => 6,
'type' => '小贴士',
'url' => '/guang/index'
)
),
'infos' => array(
array(
'id' => 1,
'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
'title' => '1.副线不知为何总是好看点',
'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
'In England中Panul Smith缔造了一个传奇',
'showTags' => true,
'publishTime' => '2月13日 12:34',
'pageView' => 3445,
'like' => array(
'count' => 459,
'isLiked' => true
),
'share' => true,
'url' => '',
'likeUrl' => '',
'isFashionMan' => true
),
array(
'id' => 1,
'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
'title' => '1.副线不知为何总是好看点',
'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
'In England中Panul Smith缔造了一个传奇',
'showTags' => true,
'publishTime' => '2月13日 12:34',
'pageView' => 3445,
'like' => array(
'count' => 459,
'isLiked' => true
),
'share' => true,
'url' => '',
'likeUrl' => '',
'isTip' => true
),
array(
'id' => 2,
'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
'title' => '2.副线不知为何总是好看点测试长度是否会被截取塞真的很恶心啊',
'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
'In England中Panul Smith缔造了一个传奇',
'showTags' => false,
'publishTime' => '2月13日 12:34',
'pageView' => 3445,
'like' => array(
'count' => 100,
'isLiked' => false
),
'share' => true,
'url' => '',
'likeUrl' => '',
'isFashionGood' => true
)
)
);
$this->_view->assign('title', 'YOHO!有货');
$this->_view->display('index', array('modulePath' => 'guang/list', 'guang' => $data));
}
/**
* 列表页
*/
public function listAction()
{
$data = array(
'infos' => array(
array(
'id' => 1,
'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
'title' => '1.副线不知为何总是好看点',
'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
'In England中Panul Smith缔造了一个传奇',
'showTags' => true,
'publishTime' => '2月13日 12:34',
'pageView' => 3445,
'like' => array(
'count' => 459,
'isLiked' => true
),
'share' => true,
'url' => '',
'likeUrl' => '',
'isFashionMan' => true
),
array(
'id' => 1,
'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
'title' => '1.副线不知为何总是好看点',
'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
'In England中Panul Smith缔造了一个传奇',
'showTags' => true,
'publishTime' => '2月13日 12:34',
'pageView' => 3445,
'like' => array(
'count' => 459,
'isLiked' => true
),
'share' => true,
'url' => '',
'likeUrl' => '',
'isTip' => true
),
array(
'id' => 2,
'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
'title' => '2.副线不知为何总是好看点测试长度是否会被截取塞真的很恶心啊',
'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
'In England中Panul Smith缔造了一个传奇',
'showTags' => false,
'publishTime' => '2月13日 12:34',
'pageView' => 3445,
'like' => array(
'count' => 100,
'isLiked' => false
),
'share' => true,
'url' => '',
'likeUrl' => '',
'isFashionGood' => true
)
)
);
$this->_view->assign('title', 'YOHO!有货');
$this->_view->display('index', array('modulePath' => 'guang/list', 'guang' => $data));
}
/**
* 编辑页
*/
public function editorAction()
{
$data = array(
'author' => array(
'avatar' => 'http://7xidk0.com1.z0.glb.clouddn.com/avater.png',
'name' => '山本耀司',
'info' => '设计理念：他以简洁而富有韵味，线条流畅，反时尚的设计风格而著称。'
),
'infos' => array(
array(
'id' => 1,
'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
'title' => '1.副线不知为何总是好看点',
'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
'In England中Panul Smith缔造了一个传奇',
'showTags' => true,
'publishTime' => '2月13日 12:34',
'pageView' => 3445,
'like' => array(
'count' => 459,
'isLiked' => true
),
'share' => true,
'url' => '',
'likeUrl' => '',
'isFashionMan' => true
),
array(
'id' => 1,
'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
'title' => '1.副线不知为何总是好看点',
'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
'In England中Panul Smith缔造了一个传奇',
'showTags' => true,
'publishTime' => '2月13日 12:34',
'pageView' => 3445,
'like' => array(
'count' => 459,
'isLiked' => true
),
'share' => true,
'url' => '',
'likeUrl' => '',
'isTip' => true
),
array(
'id' => 2,
'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
'title' => '2.副线不知为何总是好看点测试长度是否会被截取塞真的很恶心啊',
'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
'In England中Panul Smith缔造了一个传奇',
'showTags' => false,
'publishTime' => '2月13日 12:34',
'pageView' => 3445,
'like' => array(
'count' => 100,
'isLiked' => false
),
'share' => true,
'url' => '',
'likeUrl' => '',
'isFashionGood' => true
)
)
);
$this->_view->assign('title', 'YOHO!有货');
$this->_view->display('index', array('modulePath' => 'guang/list', 'guang' => $data));
}
}
\ No newline at end of file
... ...