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實現瀑布流的方式。