fe / YOHOBUYWAP · Commits

Go to a project

Authored by weiqingting
Commit d659868787a44661ecf1532147f012fda3dd3144 1 parent 481d2072

男装添加滚动无限功能

Inline Side-by-side
Showing 7 changed files with 213 additions and 64 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:new Function(),
width:new Function()
}
};
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,p=this.options;
if (g.registerEvent[key]&&g.registerEvent[key].length > 0) {
for (_e in g.registerEvent[key]) {
g.registerEvent[key][_e](params);
}
}
};
infiniteLoad.prototype.init = function() {
var g=this,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 g=this,p=this.options;
p.isload=true;
};
infiniteLoad.prototype.__directionCalculation=function(){
var g=this,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;
... ...
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;
if (code === 200) {
var 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}}'
+'<li>'
+' {{# state}}'
+' <i class="commodity-tag{{.}}"></i>'
+' {{/ state}}'
+' <a href="{{url}}"><div class="commodity-img"><img class="lazy" data-original="{{img}}" src="{{img}}"/></div>'
+' <p class="commodity-name">{{name}}</p>'
+' <p class="commodity-price"><span>¥{{price}}</span></p>'
+' </a>'
+'</li>'
+'{{/each}}';
load.emit();
})
load.init();
}($));
\ No newline at end of file
... ...
... ... @@ -8,6 +8,11 @@ var $ = require('jquery');
require('../common/linkage-slider');
require('../common/slider2');
require('../common/newArrivls');
$('.slide-container').linkageSlider();
$('.img-brand').slider2();
\ No newline at end of file
$('.img-brand').slider2();
... ...
... ... @@ -13,7 +13,9 @@
"spm": {
"main": "index.js",
"dependencies": {
"jquery": "1.8.3"
"jquery": "1.8.3",
"yoho.lazyload": "1.0.0",
"yoho.handlebars": "3.0.3"
},
"devDependencies": {
"expect.js": "0.3.1"
... ...
... ... @@ -274,8 +274,10 @@
}
}
.tpl-category{
height: 228px;
padding: 10px 0;
background-color: #f8f8f8;
overflow: hidden;
a{
float: left;
width: 50%;
... ...
... ... @@ -235,61 +235,72 @@ 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);
}
}
\ No newline at end of file
... ...