layui流加载+h5自带模板

@{
    ViewBag.Title = "服务列表";
    Layout = "~/Areas/hahaha/Views/Shared/_Head.cshtml";
}
<link href="~/Scripts/layui/css/layui.css" rel="stylesheet" />
<style>
    .up { background:url(/Content/WeiXin/images/sort-up.png) no-repeat center center; background-size:.6rem auto;}
    .down { background:url(/Content/WeiXin/images/sort-down.png) no-repeat center center; background-size:.6rem auto;}
</style>

<div class="wc_content">
    <div class="tabPanel">
        <ul class="clearfix productTad serviceList_u">
            <li class="hit" data-type="1"><span>服务项目</span></li>
            <li data-type="2"><span>服务人员</span></li>
        </ul>
    </div>
    <div class="panes serviceListpanes">
        <div class="pane" style="display:block">
            <div class="serviceList_box"> <a href="serviceSeach.html" class="serviceList_seach"><i></i>请输入关键词</a> </div>
            <div class="serviceList_t" id="dataContent">

                
            </div>
            <ul class="service_list" id="serviceData"></ul>
        </div>
    </div>
</div>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/layui/layui.js"></script>
<script type="text/javascript">
    var totalPage = 2,
    pageIndex = 1,
    serviceHtml = '',
    dataType = 1,
    sort = 1,//正序or倒序
    OrderStr;//排序字段
    $(function () {
        $('.tabPanel ul li').click(function () {//切换筛选条件
            $(this).addClass('hit').siblings().removeClass('hit');
            var s =parseInt( $(this).attr('data-type'));
            if (dataType != s) {
                dataType = s;
                $('.list_head').remove();
                $('#serviceData li').remove();
                pageIndex = 1;
                OrderStr = '';
                setHead();
                $('cite').click();
            }
            
        })
        setHead();
        loadFlow();
    })

    function setHead() {
        var scriptHtml;
        if (dataType == 1) {
            scriptHtml = $('#serviceList').html();
        } else {
            scriptHtml = $('#personList').html();
        }
        $('#dataContent').after(scriptHtml);
    }

    function loadList() {
        var act = dataType == 1 ? 'GetServices' : 'GetPersons';
        $.ajax({
            type: "GET",
            url: '/**/***/'+act,
            data: { PageIndex: pageIndex, OrderStr: OrderStr, sort: sort },
            dataType: "json",
            async: false,
            success: function (data) {
                if (data.success) {
                    totalPage = data.totalPage;
                    var objs = [];
                    var sh;
                    if (dataType == 1) {
                        sh = $('#service').html();
                    } else {
                        sh = $('#person').html();
                    }                    
                    $.each(data.result, function (i,r) {
                        objs.push(formatTemplate(r,sh))
                    })
                    serviceHtml = objs.join('');
                }
            }
        });
    }

    function loadFlow() {
        
        layui.use('flow', function () {
            var flow0 = layui.flow;

            flow0.load({
                elem: '#serviceData',
                //scrollElem: '#LAY_demo1', //滚动条所在元素，一般不用填，此处只是演示需要。
                done: function (page, next) { //执行下一页的回调

                    setTimeout(function () {
                        loadList();

                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(serviceHtml, pageIndex < totalPage); //假设总页数为 10
                        pageIndex++;
                    }, 500);
                }
            });

        });
    }

    function orderService(serId,e) {//排序
        var i = $(e).find('i');
        if (i.hasClass("up")) {
            i.addClass('down').removeClass('up');
            sort = 1;
        } else if (i.hasClass('down')) {
            i.addClass('up').removeClass('down');
            sort = 2;
        } else {
            i.addClass('down');
            sort = 1;
            $(e).parent().siblings().find('i').removeClass('down').removeClass('up');            
        }
        OrderStr = serId;
        pageIndex = 1;
        $('#serviceData li').remove();
        $('cite').click();//加载流
    }

    function formatTemplate(dta, tmpl) {  //加载模板数据
        var format = {
            name: function (x) {
                return x
            }
        };
        return tmpl.replace(/{(w+)}/g, function (m1, m2) {
            if (!m2)
                return "";
            return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2];
        });
    }
</script>

<script type="text/template" id="service">
    <li>
        <a href="/Hahaha/WxService/Index?s={ServiceID}">
            <div class="service_listL"><img src="{Image}"></div>
            <div class="service_listr">
                <div class="service_listr1 clearfix"><span>{ServiceName}</span><b>{ServiceTime}分钟</b></div>
                <p class="service_listr2">{Describe}</p>
                <div class="service_listr3"><span>￥{PresentPrice}</span><del>￥{Price}</del></div>
            </div>
        </a>
    </li>
</script>

<script type="text/template" id="serviceList">
    <ul class="serviceList_tu clearfix list_head">
        <li><a class="serviceList_tui" href="serviceCategory.html"><i></i>分类</a></li>
        <li><a onclick="orderService('ServiceID',this)" href="javascript:">新品<i></i></a></li>
        <li><a onclick="orderService('SalesCount', this)" href="javascript:">销量<i></i></a></li>
        <li><a onclick="orderService('PresentPrice', this)" href="javascript:">价格<i></i></a></li>
    </ul>
    
</script>

<script type="text/template" id="personList">
    <div class="serviceList_t list_head">
        <ul class="serviceList_tu serviceList_tu2 clearfix">
            <li><a onclick="orderService('orderService', this)" href="javascrip:">级别<i></i></a></li>
            <li><a href="javascrip:" onclick="orderService('CountServiceHas', this)">销量<i></i></a></li>
        </ul>
    </div>
</script>
<script type="text/template" id="person">
    <li>
        <a href="/Hahaha/WxService/ServiceUserIndex?s={PersonId}">
            <div class="service_listL"><img src="{Portrait}"></div>
            <div class="service_listr">
                <div class="service_listr1 clearfix"><span>{Name}<i class="{Sex}"></i></span></div>
                <p class="service_listr2">{Introduction}</p>
                <div class="service_listr4">服务次数：<span>{CountServiceHas}</span></div>
            </div>
        </a>
    </li>
</script>

效果如下图: