espcms列表页ajax获取内容 - 并初始化swiper

<link rel="stylesheet" href="swiper.min.css" type="text/css" media="screen" charset="utf-8">
<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="swiper.min.js" type="text/javascript" charset="utf-8"></script>

ajax代码：

{%forlist from=$array key=i%}
    <li>
        <h2 class="title">{%$array[i].title%}<span class="sign"></span></h2>
        <div class="detail type-details-small">
            <div class="type-des ajaxlist" id="con-{%key=>i%}" data="{%$array[i].link%}">
                ...
            </div>
        </div>
    </li>
{%/forlist%}
            
<script>
        function loadContent(mycon,myurl){
            htmlobj=$.ajax({url:myurl,async:false});
            $(mycon).html(htmlobj.responseText);
        }
        
        //ajax获取列表中每个文章的内页内容
        $(function(){     
            $(".ajaxlist").each(function(index){
                index++;
                loadContent("#con-"+index,$(this).attr("data"));
                //alert("#con-"+index);
                //alert($(this).attr("data"));
                
            });
        });
        
</script>

 

 

/********************************* 获取详情页相册 并初始化为一个个的swiper滑动 **************************************/

{%link file="cn/public/head.html"%}
    <div class="menu-gaoxiao">
    {%get name=typelist class=tid:$type.tid,utid:23%}
       <ul>
        {%forlist from=$array key=i%}
            <li {%if $array[i].selected==1 %}class="hover"{%/if%}><a title="{%$array[i].typename%}" href="{%$array[i].link%}">{%$array[i].typename%}</a></li>  
        {%/forlist%}
       </ul>
    {%/get%}
    </div>
    <div class="inside-wrap">
    
        <!--手风琴效果-->
        <div class="gaoxiao" id="sfq-list">
            <p class="type-title">
                宣讲会
            </p>
            <ul>
            {%forlist from=$array key=i%}
                <li {%if key=>i==1%}class="hover"{%/if%}>
                    <h2 class="title">{%$array[i].title%}<span class="sign"></span></h2>
                    <div class="detail type-details-small" {%if key=>i>0%}style="display:block;"{%/if%}>
                        <div class="type-des ajaxlist" id="con-{%key=>i%}" data="{%$array[i].link%}">
                            ...
                        </div>
                    </div>
                </li>
            {%/forlist%}
            </ul>
            <div class="clear"></div>
        </div>
        
        <script>
        function loadContent(mycon,myurl){
            htmlobj=$.ajax({url:myurl,async:false});
            $(mycon).html(htmlobj.responseText);
        }
        
        //ajax获取列表中每个文章的内容
        $(function(){            
            $(".ajaxlist").each(function(index){
                index++;
                loadContent("#con-"+index,$(this).attr("data"));
                //alert("#con-"+index);
                //alert($(this).attr("data"));
                console.log("ajax--"+index);
            });
            console.log($(".ajaxlist").length);
            swiperall($(".ajaxlist").length);
        });
        //初始化本页面所有的swiper
        function swiperall(num){
            var sw = [];
            
            for (i=0; i<num;){
                i++;
                sw[i] = new Swiper('#con-'+i+' .swiper-gx.swiper-container', {
                    loop:true,
                    pagination : '#con-'+i+' .pagination',
                    autoplay: 3000,
                });
                //console.log(i);
                
            }
            //console.log(num);
            
            $(".type-details-small").each(function(index){
                if(index!=0){
                    $(this).hide();
                }
            });
        }
        
        </script>
    </div>

    {%link file="cn/public/share.html"%}
    
    {%link file="cn/public/nav.html"%}
</body>
</html>

 

思路：

后台程序不能获取内容页中的相册，和详情。直接从前端入手。

循环列表页的每篇内容，ajax出所有内容页里的相册图片，添加到列表中。

然后循环这个列表，每条内容都初始化出swiper滑动。

由于swiper似乎不能在display:none生效，而需求又是除第一篇内容其他都默认隐藏，所以默认都是display:block。最后再循环一遍，给非第一篇的加上display:none。

 

程序暂时没有使用到swiper缓加载。

也考虑可以增加一个点击列表项弹出相册区域的时候再进行内容加载，以加快页面载入速度。项目赶时间，暂时先这样了。