男装添加滚动无限功能

@@ -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();
+
+
+

@@ -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,7 +235,32 @@ class BoysController extends AbstractAction
                             'href' => '',
                             'name' => 'MORE'
                         )
-                    ),
+                    )
+                )
+            )
+    		);
+        $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' ,
@@ -271,25 +296,11 @@ class BoysController extends AbstractAction
 	                    '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);
+        } while (false);
+
+        $this->echoJson($result);
     }
 }
\ No newline at end of file