Ecshop 之weui-tab 加载瀑布流

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

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

<div class="weui-tab__bd">
        <div class="list-main-mian weui-form-preview weui-pull-to-refresh infinite" id="listwrap" style=" margin-top: 1px;overflow-y: scroll;height:550px; z-index: 1;">
            <!--下拉刷新-->
            <div class="weui-pull-to-refresh__layer" style="padding: 5px;">
                <div class="weui-pull-to-refresh__arrow"></div>
                <div class="weui-pull-to-refresh__preloader"></div>
                <div class="down">下拉刷新</div>
                <div class="up">释放刷新</div>
                <div class="refresh">正在刷新</div>
            </div>
            <ul class="weui-form-preview" id="Tolist">
            </ul>
            <div class="weui-loadmore" style="padding-bottom:30px;height:20px">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
        </div>
    </div>

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 += "<div class=\"weui-cells__title\" style='text-align: center' >已无更多数据</div>";
                $("#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 += "<div class=\"weui-cells__title\" style='text-align: center'>已无更多数据</div>";
                    $("#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}
<li onclick="javascript:onSpeciesInfo({$s_species.spe_id})">
    <div class="list-left"><img src="./../{$s_species.spe_species_image}" alt=""></div>
    <div class="list-right">
        <h1>{$s_species.spe_name}</h1>
        <p>{$s_species.spe_content|truncate:20}</p>
        <div><span>{$s_species.date}</span><span>阅读&nbsp;{$s_species.spe_read}</span></div>
    </div>
</li>
{/if}

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