layui流加载+h5⾃带模板
1 @{
2 ViewBag.Title = "服务列表";
3 Layout = "~/Areas/hahaha/Views/Shared/_Head.cshtml";
4 }
5<link href="~/Scripts/layui/css/layui.css" rel="stylesheet"/>
6<style>
7 .up { background:url(/Content/WeiXin/images/sort-up.png) no-repeat center center; background-size:.6rem auto;}
8 .down { background:url(/Content/WeiXin/images/sort-down.png) no-repeat center center; background-size:.6rem auto;}
9</style>
10
11<div class="wc_content">
12<div class="tabPanel">
13<ul class="clearfix productTad serviceList_u">
14<li class="hit" data-type="1"><span>服务项⽬</span></li>
15<li data-type="2"><span>服务⼈员</span></li>
16</ul>
17</div>
18<div class="panes serviceListpanes">
19<div class="pane" >
20<div class="serviceList_box"><a href="serviceSeach.html" class="serviceList_seach"><i></i>请输⼊关键词</a></div> 21<div class="serviceList_t" id="dataContent">
22
23
24</div>
25<ul class="service_list" id="serviceData"></ul>
26</div>
27</div>
28</div>
29h5免费模板下载
30<script src="~/Scripts/jquery-1.10.2.min.js"></script>
31<script src="~/Scripts/layui/layui.js"></script>
32<script type="text/javascript">
33var totalPage = 2,
34 pageIndex = 1,
35 serviceHtml = '',
36 dataType = 1,
37 sort = 1,//正序or倒序
38 OrderStr;//排序字段
39 $(function () {
40 $('.tabPanel ul li').click(function () {//切换筛选条件
41 $(this).addClass('hit').siblings().removeClass('hit');
42var s =parseInt( $(this).attr('data-type'));
43if (dataType != s) {
44 dataType = s;
45 $('.list_head').remove();
46 $('#serviceData li').remove();
47 pageIndex = 1;
48 OrderStr = '';
49 setHead();
50 $('cite').click();
51 }
52
53 })
54 setHead();
55 loadFlow();
56 })
57
58function setHead() {
59var scriptHtml;
60if (dataType == 1) {
61 scriptHtml = $('#serviceList').html();
62 } else {
63 scriptHtml = $('#personList').html();
64 }
65 $('#dataContent').after(scriptHtml);
66 }
67
68function loadList() {
69var act = dataType == 1 ? 'GetServices' : 'GetPersons';
70 $.ajax({
71 type: "GET",
72 url: '/**/***/'+act,
73 data: { PageIndex: pageIndex, OrderStr: OrderStr, sort: sort },
74 dataType: "json",
75 async: false,
76 success: function (data) {
77if (data.success) {
78 totalPage = alPage;
79var objs = [];
80var sh;
81if (dataType == 1) {
82 sh = $('#service').html();
83 } else {
84 sh = $('#person').html();
85 }
86 $.sult, function (i,r) {
87 objs.push(formatTemplate(r,sh))
88 })
89 serviceHtml = objs.join('');
90 }
91 }
92 });
93 }
94
95function loadFlow() {
96
97 layui.use('flow', function () {
98var flow0 = layui.flow;
99
100 flow0.load({
101 elem: '#serviceData',
102//scrollElem: '#LAY_demo1', //滚动条所在元素，⼀般不⽤填，此处只是演⽰需要。
103 done: function (page, next) { //执⾏下⼀页的回调
104
105 setTimeout(function () {
106 loadList();
107
108//执⾏下⼀页渲染，第⼆参数为：满⾜“加载更多”的条件，即后⾯仍有分页
109//pages为Ajax返回的总页数，只有当前页⼩于总页数的情况下，才会继续出现加载更多
110 next(serviceHtml, pageIndex < totalPage); //假设总页数为 10
111 pageIndex++;
112 }, 500);
113 }
114 });
115
116 });
117 }
118
119function orderService(serId,e) {//排序
120var i = $(e).find('i');
121if (i.hasClass("up")) {
122 i.addClass('down').removeClass('up');
123 sort = 1;
124 } else if (i.hasClass('down')) {
125 i.addClass('up').removeClass('down');
126 sort = 2;
127 } else {
128 i.addClass('down');
129 sort = 1;
130 $(e).parent().siblings().find('i').removeClass('down').removeClass('up');
131 }
132 OrderStr = serId;
133 pageIndex = 1;
134 $('#serviceData li').remove();
135 $('cite').click();//加载流
136 }
137
138function formatTemplate(dta, tmpl) { //加载模板数据
139var format = {
140 name: function (x) {
141return x
142 }
143 };
place(/{(\w+)}/g, function (m1, m2) {
145if (!m2)
146return "";
147return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2];
148 });
149 }
150</script>
151
152<script type="text/template" id="service">
153 <li>
154 <a href="/Hahaha/WxService/Index?s={ServiceID}">
155 <div class="service_listL"><img src="{Image}"></div>
156 <div class="service_listr">
157 <div class="service_listr1 clearfix"><span>{ServiceName}</span><b>{ServiceTime}分钟</b></div> 158 <p class="service_listr2">{Describe}</p>
159 <div class="service_listr3"><span>￥{PresentPrice}</span><del>￥{Price}</del></div>
160 </div>
161 </a>
162 </li>
163</script>
164
165<script type="text/template" id="serviceList">
166 <ul class="serviceList_tu clearfix list_head">
167 <li><a class="serviceList_tui" href="serviceCategory.html"><i></i>分类</a></li>
168 <li><a onclick="orderService('ServiceID',this)" href="javascript:">新品<i></i></a></li>
169 <li><a onclick="orderService('SalesCount', this)" href="javascript:">销量<i></i></a></li>
170 <li><a onclick="orderService('PresentPrice', this)" href="javascript:">价格<i></i></a></li>
171 </ul>
172
173</script>
174
175<script type="text/template" id="personList">
176 <div class="serviceList_t list_head">
177 <ul class="serviceList_tu serviceList_tu2 clearfix">
178 <li><a onclick="orderService('orderService', this)" href="javascrip:">级别<i></i></a></li> 179 <li><a href="javascrip:" onclick="orderService('CountServiceHas', this)">销量<i></i></a></li> 180 </ul>
181 </div>
182</script>
183<script type="text/template" id="person">
184 <li>
185 <a href="/Hahaha/WxService/ServiceUserIndex?s={PersonId}">
186 <div class="service_listL"><img src="{Portrait}"></div>
187 <div class="service_listr">
188 <div class="service_listr1 clearfix"><span>{Name}<i class="{Sex}"></i></span></div> 18
9 <p class="service_listr2">{Introduction}</p>
190 <div class="service_listr4">服务次数：<span>{CountServiceHas}</span></div>
191 </div>
192 </a>
193 </li>
194</script>
效果如下图:
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论