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));