fe / YOHOBUYWAP · Commits

Go to a project

Authored by xuqi
Commit 47dd14bb83e46a289235d9f307a96468070ad1d4 2 parents e1e2a388 24b7a1a7

Merge branch 'feature/web' of http://git.dev.yoho.cn/web/yohobuy into feature/web

Inline Side-by-side
Showing 7 changed files with 253 additions and 63 deletions
... ... @@ -2,17 +2,7 @@
<div class="commodity">
<ul class="clearfix">
{{#each commodity}}
<li>
{{# state}}
<i class="commodity-tag{{.}}"></i>
{{/ state}}
<a href="{{url}}"><div class="commodity-img"><img class="lazy" data-original="{{img}}"/></div>
<p class="commodity-name">{{name}}</p>
<p class="commodity-price"><span>¥{{price}}</span></p>
</a>
</li>
{{/each}}
</ul>
<div class="loading">
<p>Loading...</p>
... ...
var $ = require('jquery');
function infiniteLoad(options) {
var defaults = {
index: 0,
isload: true,//是否正在加载
isrun: true,//判断是否执行
offset: {
height: null,
width: null
}
};
this.registerEvent = {
before: [],
change: [],
after: []
};
this.options = $.extend(true, {}, defaults, options);
return this;
}
infiniteLoad.prototype.on = function(name, callback) {
var g = this;
var _e = g.registerEvent[name];
if (_e) {
_e.push(callback);
}
return _e;
};
infiniteLoad.prototype.off = function(name, callback) {
var g = this;
var _e = g.registerEvent[name];
var e = [];
$.each(_e, function(name, _callback) {
if (_callback === callback) {
e.push(name);
}
});
$.each(e.reverse(), function(name, _callback) {
_e.splice(_callback, 1);
});
};
infiniteLoad.prototype.exect = function(key, params) {
var g = this;
var e;
if (g.registerEvent[key] && g.registerEvent[key].length > 0) {
for (e in g.registerEvent[key]) {
if (g.registerEvent[key].hasOwnProperty(e)) {
g.registerEvent[key][e](params);
}
}
}
};
infiniteLoad.prototype.init = function() {
var g = this;
var p = this.options;
function __loadMore() {
if (p.isload && g.__directionCalculation()) {
p.isload = false;
p.index++;
g.exect('after', p);
}
g.exect('change', p);
}
g.exect('before', p);
$(window).scroll(__loadMore);
};
infiniteLoad.prototype.emit = function() {
var p = this.options;
p.isload = true;
};
infiniteLoad.prototype.__directionCalculation = function() {
var p = this.options;
if (p.offset.height() > 0 && $(window).scrollTop() + $(window).height() >= p.offset.height()) {
return true;
}
if (p.offset.width() > 0 && $(window).scrollLeft() + $(window).width() >= p.offset.width()) {
return true;
}
return false;
};
module.exports = infiniteLoad;
\ No newline at end of file
... ...
var $ = require('jquery');
//var Lazyload = require('yoho.lazyload');
var Handlebars = require('yoho.handlebars');
var InfiniteLoad = require('../common/infiniteLoad');
(function($) {
var $container = $('div.commodity ul');
var $load = $('.loading');
var load = new InfiniteLoad({
offset: {
height: function() {
return parseFloat($container.offset().top) + parseFloat($container.height());
}
}
});
load.on('after', function(p) {
var options = {
type: 'POST',
url: '/boys/commodity',
data: {
pageIndex: p.index,
pageCount: 10,
flag: 'boy'
},
success: function(data) {
var code = data.code;
var myTemplate;
if (code === 200) {
myTemplate = Handlebars.compile(load.tpl);
$container.append(myTemplate(data.commodity));
//懒加载插件貌似有点问题,图片先直接展示
//Lazyload($container.find('img.lazy'));
load.emit();
} else {
$load.html('END');
}
},
error: function() {
$load.html('网络断开连接了~');
}
};
$.ajax(options);
});
load.on('before', function() {
//请求模板
load.tpl = '{{#each this}}';
load.tpl += '<li>';
load.tpl += ' {{# state}}';
load.tpl += ' <i class="commodity-tag{{.}}"></i>';
load.tpl += ' {{/ state}}';
load.tpl += ' <a href="{{url}}"><div class="commodity-img">';
load.tpl += ' <img class="lazy" data-original="{{img}}" src="{{img}}"/></div>';
load.tpl += ' <p class="commodity-name">{{name}}</p>';
load.tpl += ' <p class="commodity-price"><span>¥{{price}}</span></p>';
load.tpl += ' </a>';
load.tpl += '</li>';
load.tpl += '{{/each}}';
load.emit();
});
load.init();
}($));
... ...
... ... @@ -9,10 +9,13 @@ var $ = require('jquery'),
require('../common/linkage-slider');
require('../common/slider2');
require('../common/newArrivls');
$('.slide-container').linkageSlider();
$('.img-brand').slider2();
$.ajax({
type: 'GET',
url: '/boys/getBrand',
... ... @@ -90,4 +93,4 @@ $.ajax({
});
});
}
});
\ No newline at end of file
});
... ...
... ... @@ -14,6 +14,7 @@
"main": "index.js",
"dependencies": {
"jquery": "1.8.3",
"yoho.lazyload": "1.0.0",
"yoho.handlebars": "3.0.3"
},
"devDependencies": {
... ...
... ... @@ -277,8 +277,10 @@
}
}
.tpl-category{
height: 228px;
padding: 10px 0;
background-color: #f8f8f8;
overflow: hidden;
a{
float: left;
width: 50%;
... ...
... ... @@ -373,63 +373,74 @@ class BoysController extends AbstractAction
'href' => '',
'name' => 'MORE'
)
),
'commodity'=>array(
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
)
)
)
)
);
$this->_view->display('index', $data);
}
/**
* 男装首页 新品上架 接口数据
*
* @param int $pageIndex 当前页数
* @param int $pageCount 一页显示个数
* @param string flag 类型(男装/女装等,用于区分)
* @return json
*/
public function commodityAction()
{
$result = array();
do {
/* 判断是不是AJAX请求 */
if (!$this->isAjax()) {
break;
}
$result=array(
'code'=>200,
'commodity'=>array(
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
),
array(
'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
'name'=> '优显led触控台灯',
'price'=> 168,
'state'=> 1 //状态
)
)
);
} while (false);
$this->echoJson($result);
}
public function getBrandAction()
{
... ... @@ -693,6 +704,7 @@ class BoysController extends AbstractAction
)
)
);
$this->echoJson($data);
}
}
\ No newline at end of file
... ...