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>
效果如下图:
layui流加载+h5自带模板的更多相关文章
- js图片加载效果(延迟加载+瀑布流加载)
概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...
- thinkPHP+LayUI 懒加载实现
html <div class="layui-container" id="container"> </div> js,要引入layui ...
- iOS “请在微信客户端打开链接” UIWebview加载H5页面携带session、cookie、User-Agent信息 设置cookie、清除cookie、设置User-Agent
公司新开的一个项目..内容基本上是加载H5页面显示..当时觉得挺简单的..后来发现自己掉坑里了..一些心理历程就不说了..说这个项目主要用到的知识点吧..也是自己踩得坑. 首先说说..这个项目上的内容 ...
- 浅试 Webview 一app 加载 H5小游戏
整体架构: InventionActivity:实现UI的实例化,基本的按钮Activity之间跳转 GameActivity:实现UI的实例化,Webview的基本使用 MyProgressDial ...
- 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下,android怎么加载H5界面
PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...
- WAP用户评论简单实现瀑布流加载
wap端经常会遇到产品或者评论的加载,但是分页的体验不是很好,所以选择通过js实现瀑布流加载方式. 第一步:需要动态加载的主要内容,这里需要动态加载的是li标签的内容 <ul class=&qu ...
- Android:webView加载h5网页视频,播放不了,以及横屏全屏的问题和实现自定义加载进度条的效果
1.webView加载h5网页视频,播放不了,android3.0之后要在menifest添加硬件加速的属性 android:hardwareAccelerated="true". ...
- c#字符串加载wpf控件模板代码 - 简书
原文:c#字符串加载wpf控件模板代码 - 简书 ResourceManager resManagerA = new ResourceManager("cn.qssq666.Properti ...
- 仿微信中加载网页时带线行进度条的WebView的实现
finddreams:http://blog.csdn.net/finddreams/article/details/44172639 为了仿微信中加载网页时带进度条的WebView的实现,首先我们来 ...
随机推荐
- CSS布局-body高度不等于页面高度
记录采坑: 博客记录问题,用作回忆用,不喜勿喷! html,body{width: 100%; height: 100%}这是初始定义的宽高.在布局越写越复杂的时候,布局很容易出现问题,例如一个页面中 ...
- 指导手册01:安装Hadoop
指导手册01:安装Hadoop Part 1:安装及配置虚拟机 1.安装Linux. (1)打开VMvirtualBox (2) 控制->新建虚拟机,输入虚拟机名称“marst+学号” 类型: ...
- windows环境搭建Vue开发环境
一.安装node.js(https://nodejs.org/en/) 下载完毕后,可以安装node,建议不要安装在系统盘(如C:). 二.设置nodejs prefix(全局)和cache(缓存)路 ...
- python day21 ——面向对像-反射 getattr,内置方法
一.反射:用字符串数据类型的变量名来访问这个变量的值 上代码^_^ # class Student: # ROLE = 'STUDENT' # @classmethod # def check_cou ...
- LINUX系统配置
LINUX系统配置 Linux 安装jdk方法; Linux Tomcat 安装与配置 Linux redis 安装与配置 (例1) Linux redis安装配置(例2) NGINX 安装 Linu ...
- 3.4 unittest之装饰器(@classmethod)
3.4 unittest之装饰器(@classmethod) 前言前面讲到unittest里面setUp可以在每次执行用例前执行,这样有效的减少了代码量,但是有个弊端,比如打开浏览器操作,每次执行用例 ...
- 【转】@RequestBody注解出现的三点错误
错误1 { "timestamp": 1529747704259, "status": 415, "error": ...
- Restful levels &HATEOAS基本介绍~
本文所涉及的内容摘自:http://www.manongjc.com/article/93934.html 什么是RESTful REST这个词,是Roy Thomas Fielding在他2000年 ...
- Codeforces1062D. Fun with Integers(埃氏筛)
题目链接:传送门 题目: D. Fun with Integers time limit per test seconds memory limit per test megabytes input ...
- 洛谷P1605:迷宫(DFS)
题目背景 迷宫 [问题描述] 给定一个N*M方格的迷宫,迷宫里有T处障碍,障碍处不可通过.给定起点坐标和终点坐标,问: 每个方格最多经过1次,有多少种从起点坐标到终点坐标的方案.在迷宫中移动有上下左右 ...