Framework7下拉刷新，滚动加载更多，幻灯片

<div class="navbar">
    <div class="navbar-inner bg-red">
        <div class="left">
            <a href="{:U('Shop/index')}" class="back link icon-only" data-force="true" data-ignore-cache="true"><i class="fa fa-chevron-left fg-white"></i></a>
        </div>
        <div class="center fg-white">列表页</div>
        <div class="right">
            <!--<a href="{:U('Shop/index')}" class="back link icon-only fg-white" data-force="true" data-ignore-cache="true"><i class="fa fa-home"></i></a>-->
        </div>
    </div>
</div>




<div class="pages navbar-through">
    <div class="page page-list bg-e7e7e7 no-toolbar page-shop-list">
        <style>
            .text-max-h {
                position: relative;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                display: -webkit-box;
            }


            .row .col-50 {
                width: 50%;
                width: -webkit-calc((100% - 5px * 1) / 2);
                width: calc((100% - 5px * 1) / 2);
            }


            .pager.row [class*="col-"] {
                border-color: #d40b0b !important;
            }


            .swiper-pagination-bullets {
                bottom: 6px !important;
            }


            .swiper-pagination-bullet {
                background-color: #fff !important;
                opacity: 1;
            }


            .swiper-pagination-bullet-active {
                background-color: #d40b0b !important;
            }


            .infinite-scroll-preloader {
                margin: 10px 0;
                text-align: center;
            }


            .infinite-scroll-preloader .preloader {
                width: 34px;
                height: 34px;
            }
        </style>


        <div class="page-content pull-to-refresh-content infinite-scroll" data-url="{:U('Shop/products_list')}" data-ptr-distance="60" data-now-page="{$nowPage}" data-last-page="{$lastPage}" data-distance="100">


            <div class="pull-to-refresh-layer">
                <div class="preloader"></div>
                <div class="pull-to-refresh-arrow"></div>
            </div>

            <div style="margin-bottom:-5px;" class="swiper-container swiper-init" data-pagination=".swiper-pagination" data-loop="true" data-autoplay="true" data-speed="3000" data-auto-height="true">
                <div class="swiper-pagination"></div>
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img width="100%" src="__IMG__/index_1.jpg"/>
                    </div>
                    <div class="swiper-slide">
                        <img width="100%" src="__IMG__/index_1.jpg"/>
                    </div>
                    <div class="swiper-slide">
                        <img width="100%" src="__IMG__/index_1.jpg"/>
                    </div>
                    <div class="swiper-slide">
                        <img width="100%" src="__IMG__/index_1.jpg"/>
                    </div>
                    <div class="swiper-slide">
                        <img width="100%" src="__IMG__/index_1.jpg"/>
                    </div>
                </div>
            </div>


            <div class="row mrg-v-5 shop-list">
                <volist name='data' id='vo'>
                    <div class="list-block col-50 tablet-33 align-center">
                        <ul class="mrg-bottom-5">
                            <li class="null-underline">
                                <a href="{:U('detail',array('id'=>$vo['id'],'source'=>'products_list'))}" class="index-index show">
                                    <div class="no-pd-bottom">
                                        <img style="height:100%;width:100%" src="{$vo['smallimg_name']|preg_replace='/\\.\\/Uploads/i','__DOMAINROOT__/Uploads',###}"/>
                                    </div>
                                    <div class="align-left text-max-h fg-black" style="font-size: 13px;font-weight: bold;padding: 3px 10px;">{$vo['product_name']}</div>
                                    <div class="fg-red align-left pd-left-10">
                                        <span style="font-size: 16px;font-weight: bold">{$vo['mem_price']}</span><span style="font-size: 12px">&nbsp;{$Think.lang.count}</span>
                                        <span class="fg-gray" style="font-size: 14px">&nbsp;PV：{$vo['pv']}&nbsp;{$Think.lang.count}</span>
                                    </div>
                                    <div class="pd-h-10 fg-gray align-left pd-top-5 pd-bottom-10" style="font-size: 10px;">{$Think.lang.SOLD}{$vo['sold']}{$vo['unit']}</div>
                                </a>
                                <a href="#" data-meg="true" class="add-cart-link show" data-url="{:U('add_cart',array('product_code'=>$vo['product_code']))}" οnclick="add_cart(this)" style="position:absolute;bottom:7px;right:7px;">
                                    <i class="fa fa-cart-plus bg-red fg-white" style="height:30px;width:30px;border-radius:15px;line-height: 30px;font-size: 20px;"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </volist>
            </div>




            <!--<div class="content-block mrg-top-10 pd-v-10" data-form="#">
                {$page}
            </div>-->


            <div class="content-block infinite-scroll-preloader">
                <div class="preloader"></div>
            </div>
        </div>
    </div>
</div>