Ecshop 之weui-tab 加载瀑布流

上一篇文章，我已经实现了ecshop使用jquery.more.js加载瀑布流，可是在测试过程中我发现，原本在chrome浏览器中测试可以通过，可是到了我手机的浏览器中测试时，却怎么也不能滚动加载，做了很多尝试问题依旧，我猜想，极有可能是因为jquey.more.js与手机浏览器存在兼容问题，我不想去考虑太深的东西，所以改变加载方式。

由于我的页面中是使用weui-tab的方式来分类加载数据，所以我查找了weui实现瀑布流加载的方式，果然weui是很容易实现的，所以我改写了我的代码。

        

            
            

                

                

                
下拉刷新
                
释放刷新
                
正在刷新
            
            

            
            

                
                正在加载
            
        
    

weui是自带之这种方式的，我们给“listwrap"绑定两个事件，weui-pull-to-refresh——下拉刷新，infinite——滚动加载。

“weui-pull_to-refresh__layer"是显示下拉刷新的标签，“weui-form-preview"是用来加载数据的，“weui-loadmore"是用来显示加载状态的 。

然后我们在js中来监听“listwrap”的下拉事件“pull-to-refresh”，和滚动加载事件“infinite”

var pages = 1;
    var sizes = 10;
    var loading = false;  //状态标记
    $(function () {
        loadlist(pages,sizes);
    })
    //=========================下拉刷新
    $("#listwrap").pullToRefresh().on("pull-to-refresh", function () {
        //window.scrollTo(0,0);
        setTimeout(function () {
            pages = 1;
            $("#Tolist").html("");
            loadlist(pages,sizes);
            if (loading) loading = false;
            $("#listwrap").pullToRefreshDone(); // 重置下拉刷新
        }, 1500);   //模拟延迟
    });
    //============================滚动加载
    $("#listwrap").infinite().on("infinite", function () {
        if (loading) return;
        loading = true;
        pages++; //页数
        $('.weui-loadmore').show();
        setTimeout(function () {
            loadlist(pages,sizes);
            loading = false;
        }, 2500);   //模拟延迟
    });
    // =======加载数据loadlist();

    function loadlist(pg,sz) {
        var data={"last":(pg-1)*sz,"amount":sz};
        var html = "";
        $.ajax({
            type: "POST",
            url: 's_species.php?act=ajax&cat_id={$cat_id}&keywords={$keywords}&sort={$smarty.request.sort}&order={$smarty.request.order}&page='+pg + '&size=' + sz,
            data: data,
            dataType: "json",
            error: function (request) {
                $(".weui-loadmore").hide();
                html += "
已无更多数据
";
                $("#Tolist").append(html);
            },
            success: function (data) {
                if (data != null && data.length > 0) {
                    $(data).each(function () {
                        $.each(this, function (key, value) {
                            html += value;
                        })
                    })
                    $("#Tolist").append(html);
                }
                else {
                    html += "
已无更多数据
";
                    $("#Tolist").append(html);
                    loading = true;
                }
                $(".weui-loadmore").hide();

            }
        });
    }

由于我是基于原来的方式改写的，所以PHP中不需要更改，在模板中发送POST时需要将分页数据传过去。

PHP中的代码：

if ($action == 'ajax')
{
    include('includes/cls_json.php'); //引入json库

    //获取分页等post请求参数
    $last = $_POST['last'];
    $amount = $_POST['amount'];
    $limit = "limit $last,$amount";
    $json = new JSON;

    $cat_id = isset($_REQUEST['cat_id'])  ? intval($_REQUEST['cat_id']) : 0;
    $keywords = empty($_REQUEST['keywords']) ? '' : trim($_REQUEST['keywords']);
    //分页
    $page = isset($_REQUEST['page']) && intval($_REQUEST['page']) > 0 ? intval($_REQUEST['page']) : 1;
    $size = isset($_CFG['page_size']) && intval($_CFG['page_size']) > 0 ? intval($_CFG['page_size']) : 10;

    //排序
    $order =  'ASC';
    $sort =  'createtime';

    //获取数据
    $s_species_list = get_species_list($cat_id,$size, $page, $sort, $order,$limit,$keywords);

    //生成数据
    foreach ($s_species_list as $val) {
        $smarty->assign('s_species', $val);
        $res[]['info'] = $GLOBALS['smarty']->fetch('library/s_species_list_ajax.lbi');
    }

    die($json->encode($res));
}

模块化组件s_species_list_ajax.lbi

{if $s_species.spe_id}

    

    

        
{$s_species.spe_name}
        
{$s_species.spe_content|truncate:20}
        
{$s_species.date}阅读 {$s_species.spe_read}
    

{/if}

到这里我们就实现了weui实现瀑布流的方式。