ectouch 实现按需加载商品信息(Jquery 2.1.1 插件版本)
插件需求
实现用户在手机端下拉商品信息时实现按需动态加载
相关技术
jquery ajax css3
html页面代码（仅供参考代码结构）
<div class="ycd-js-container">
<div class="swiper-container" id="swiper-container2" >
<div class="swiper-wrapper swiper-catogry-tab-title-list">
<!--{foreach from=$pcat_array item=cat name=no}-->
{if $cat.cat_id }
{if $smarty.foreach.no.index eq 0}
<div class="swiper-slide active-nav">{$cat.name|escape:html}</div>
{else}
<div class="swiper-slide">{$cat.name|escape:html}</div>
{/if}
{else}
<div class="swiper-slide"><a href="{$cat.url}">{$cat.name|escape:html}</a></div>
{/if}
<!--{/foreach}-->
</div>
</div>
<div class="swiper-container" id="swiper-container3">
<div class="swiper-wrapper">
<!--{foreach from=$pcat_array item=cat name=no}-->
{if $cat.cat_id }
<div class="swiper-slide">
<!--这里面我们还需要进行嵌套分两个部分 tab切换-->
<ul class="yc-swiper-categry-left-tab" data-listview="6" data-listheight="" >
<!--{foreach from=$cat.cat_id item=child name=no1 }-->
{if $smarty.foreach.no1.index eq 0}
<li class="ycd-left-tab-slide active-nav">
<a href="javascript:void(0);" data-target="{$child.url}" data-id="{$child.id}">{$child.name|escape:html}</a>
</li>
{else}
<li class="ycd-left-tab-slide">
<a href="javascript:void(0);" data-target="{$child.url}" data-id="{$child.id}">{$child.name|escape:html}</a>
</li>
{/if}
<!--{/foreach}-->
</ul>
<!--{foreach from=$cat.cat_id item=child name=no1 }-->
<div class="yc-swiper-right-list-content" id="ycd-content-{$child.id}" data-target="{$child.url}">
<div class="yc-swiper-right-list-item">
<div class="pro-inner"></div>
</div>
<a href="javascript:;" class="get_more"></a>
</div>
<!--{/foreach}-->
</div>
{/if}
<!--{/foreach}-->
</div>
</div>
<div class="ycd-bottom-fixed">
</div>
</div>
<script> $('.swiper-slide .yc-swiper-categry-left-tab li').tap(function(event){ event.preventDefault(); var index = $(this).index(); $(this).parent().find('li').removeClass('active-nav').eq(index).addClass('active-nav') $(this).parent().parent().find('.yc-swiper-right-list-content').hide().eq(index).show('slow'); //进行ajax 导航 var id = $(this).find('a').data('id'); var data_target= '#ycd-content-'+id; jQuery(data_target).html(' <div class="yc-swiper-right-list-item"><div class="pro-inner"></div></div><a href="javascript:;" class="get_more"></a>'); jQuery(data_target).more({'address': 'category.php?act=asynclist&category='+id+'&brand=0&price_min=0&price_max=0&filter_attr=0&page=1&sort=goods_id&order=DESC', 'template':'.yc-swiper-right-list-item','spinner_code':'<div style="text-align:center; margin:10px;"><img src="{$ectouch_themes}/images/loader.gif" /></div>','last':0}); }); </script>插件代码（需要jquery 支持）
(function( $ ){ var target = null; var template = null; var lock = false; var variables = { 'last' : 0 } var settings = { 'amount' : '10', 'address' : 'comments.php', 'format' : 'json', 'template' : '.single_item', 'trigger' : '.get_more', 'scroll' : 'false', 'offset' : '10', 'spinner_code': '' } var methods = { init : function(options){ return this.each(function(){ if(options){ $.extend(settings, options); } variables.last = options.last; template = $(this).children(settings.template).wrap('<div/>').parent(); template.css('display','none') $(this).append('<div class="more_loader_spinner">'+settings.spinner_code+'</div>') $(this).children(settings.template).remove() target = $(this); if(settings.scroll == 'false'){ $(this).find(settings.trigger).bind('click.more',methods.get_data); $(this).more('get_data'); } else{ if($(this).height() <= $(this).attr('scrollHeight')){ target.more('get_data',settings.amount*2); } $(this).bind('scroll.more',methods.check_scroll); } $(window).bind('scroll',methods.autoscroll); }) }, autoscroll:function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()) { target.find(settings.trigger).click(); } }, check_scroll : function(){ if((target.scrollTop()+target.height()+parseInt(settings.offset)) >= target.attr('scrollHeight') && lock == false){ target.more('get_data'); } }, debug : function(){ var debug_string = ''; $.each(variables, function(k,v){ debug_string += k+' : '+v+'\n'; }) alert(debug_string); }, remove : function(){ target.children(settings.trigger).unbind('.more'); target.unbind('.more') target.children(settings.trigger).remove(); }, add_elements : function(data){ var root = target var counter = 0; if(data){ $(data).each(function(){ counter++ var t = template $.each(this, function(key, value){ if(t.find('.'+key)) t.find('.'+key).html(value); }) if(settings.scroll == 'true'){ root.children('.more_loader_spinner').before(t.html()) }else{ root.children(settings.trigger).before(t.html()) } root.children(settings.template+':last').attr('id', 'more_element_'+ ((variables.last++)+1)) }) } else methods.remove() target.children('.more_loader_spinner').css('display','none'); if(counter < settings.amount) methods.remove() }, get_data : function(){ var ile; lock = true; target.children(".more_loader_spinner").css('display','block'); target.find(settings.trigger).css('display','none'); if(typeof(arguments[0]) == 'number') ile=arguments[0]; else { ile = settings.amount; } $.post(settings.address, { last : variables.last, amount : ile }, function(data){ target.find(settings.trigger).css('display','block') methods.add_elements(data) lock = false; }, settings.format) } }; $.fn.more = function(method){ if(methods[method]) return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); else if(typeof method == 'object' || !method) return methods.init.apply(this, arguments); else $.error('Method ' + method +' does not exist!'); } })(jQuery)服务器端api接口（返回json数据）
效果
总结
因为是移动端项目 webapp 使用了大量css3 技术 且 选用了移动端流行的框架zepto 和最新的jquery框架 2.1.1 关于在一个项目里面使用两个库 解决冲突问题
//只需要这样写
//兼容Zepto
Zepto(function($){
//code here
});
//兼容Jquery
Jquery(function($){
//code here
});
//模块化加载(node)
require('jquery');
(function($$,$){
//在一个匿名函数中使用 $$=>Zepto $=>Jquery
}(Zepto,Jquery));