MUI实现上拉加载和下拉刷新
编写存储过程分页（此处使用T-SQL）
CREATE PROC [dbo].[Common_PageList]
(
@tab nvarchar(max),---表名
@strFld nvarchar(max), --字段字符串
@strWhere varchar(max), --where条件
@PageIndex int, --页码
@PageSize int, --每页容纳的记录数
@Sort VARCHAR(255), --排序字段及规则,不用加order by
@IsGetCount bit --是否得到记录总数，1为得到记录总数，0为不得到记录总数，返回记录集
)
AS
declare @strSql nvarchar(max)
set nocount on;
if(@IsGetCount = 1)
begin
set @strSql='SELECT COUNT(0) FROM ' + @tab + ' WHERE ' + @strWhere
end
else
begin
set @strSql=' SELECT * FROM (SELECT ROW_NUMBER()
OVER(ORDER BY ' + @Sort + ') AS rownum, ' + @strFld + ' FROM ' + @tab + ' where ' + @strWhere + ') AS Dwhere
WHERE rownum BETWEEN ' + CAST(((@PageIndex-1)*@PageSize + 1) as nvarchar(20)) + ' and ' + cast((@PageIndex*@PageSize) as nvarchar(20))
end print @strSql
exec (@strSql) set nocount off;
分页存储过程
webApi接口（ADO.NET部分封装了，此处是调用形式）
/// 测试mui下拉刷新
/// </summary>
/// <param name="flag"></param>
/// <returns></returns>
[HttpPost]
public object test(JObject data)
{ using (var db = new DbBase())
{
SqlParameter[] arr = {
new SqlParameter{ ParameterName="tab",Value=data["tab"].ToString()},
new SqlParameter{ ParameterName="strFld",Value=data["strFld"].ToString()},
new SqlParameter{ ParameterName="strWhere",Value=data["strWhere"].ToString()},
new SqlParameter{ ParameterName="PageIndex",Value=Convert.ToInt32(data["PageIndex"])},
new SqlParameter{ ParameterName="PageSize",Value=Convert.ToInt32(data["PageSize"])},
new SqlParameter{ ParameterName="Sort",Value=data["Sort"].ToString()},
new SqlParameter{ ParameterName="IsGetCount",Value=Convert.ToInt32(data["IsGetCount"])},
}; return RepositoryBase.ExecuteReader(db, "Common_PageList", arr); }
webApi接口
页面实现
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="../css/mui.min.css">
<style type="text/css"> </style>
</head> <body> <header class="mui-bar mui-bar-nav">
<h1 class="mui-title">下拉刷新（单webview模式）</h1>
</header> <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll"> <ul id="container" class="mui-table-view mui-table-view-chevron"></ul> </div>
</div> <ul id="temp" class="mui-table-view" style="display: none;">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
@name
</a>
</li> </ul> <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
<script> /**
数据源分页参数对象
* */
var obj={ tab:'SystemUsers',
strFld:'code,Username',
strWhere:'1=1',
PageIndex:1,
PageSize:10,
Sort:'Username',
IsGetCount:0,
pageCount:0
} //webApi服务器接口
var apiUrl="http://192.168.200.114:8123/api/Common/Base/test"; /**
* 定义数据源按什么html方式展示，动态生成html字符串的逻辑
**/
var drawHtml=function(data){
var html=""
for (var i=0;i<data.length;i++)
{
var temp=document.getElementById("temp").innerHTML; //模板
html+=temp.toString().replace('@name',data[i].Username); //替换参数叠加
} return html;
} mui.ready(function(){ /**
MUI配置项
* */
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
}, //END 下拉刷新
up : {
contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
callback :pullupRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
} //END 上拉加载
}
}); //统计：数据总数、分页总数
obj.IsGetCount=1;
loadData(apiUrl,obj,0); //初始化列表数据（第一页）
obj.IsGetCount=0;
loadData(apiUrl,obj,0,"down",function(data){
//此处实现动态绘制DOM的逻辑，根据数据源自行处理要展示的html方式
return drawHtml(data); }); }); /*
读取数据源
url：api地址
dataObj：数据源分页查询参数对象
Timeout：指定多少时间后绘制页面DOM展示对象，
动态生成的元素代码包含在一个setTimeout函数里，
用 setTimeout，主要对于下拉刷新间隔时间
loadType：加载方式：up(上拉加载)、down(上拉刷新)
drawFunction：回调函数，处理拿到数据源，绘制DOM展示界面的html
，要接收返回的html字符串
* */ var loadData=function(url,dataObj,Timeout,loadType,drawFunction){ mui.ajax(url, {
type: "post",
data:dataObj,
async:false,
headers: {'Content-Type': 'application/json'},
success: function(data) { //统计出数据总数
if(dataObj.IsGetCount==1)
{
obj.pageCount=Math.ceil(parseInt(data[0].Column1)/obj.PageSize) ;
return;
} setTimeout(function() { //动态绘制出的Dom元素，结合数据展现
var html= drawFunction(data); if(loadType=="up") //上拉加载
{
if(obj.PageIndex==obj.pageCount)
{
//参数为true代表没有更多数据了。
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
}
else
{
mui('#pullrefresh').pullRefresh().endPullupToRefresh();
} //将下一页数据追加到容器
document.getElementById("container").innerHTML=document.getElementById("container").innerHTML+html;
}
else if(loadType=="down") //下拉刷新
{
// 该方法的作用是关闭“正在刷新”的样式提示，内容区域回滚顶部位置
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //将第一页数据覆盖到容器
document.getElementById("container").innerHTML=html; //启用上拉加载
mui('#pullrefresh').pullRefresh().enablePullupToRefresh(); } }, Timeout);//END setTimeout(); },//END success(); error: function(xhr, type, errorThrown) {
console.log(type);
}//END error(); });//END ajax(); }//END loadData(); /**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
console.log('重置数据，初始到第一页');
obj.PageIndex=1; loadData(apiUrl,obj,1000,"down",function(data){
//此处实现动态绘制DOM的逻辑，根据数据源自行处理要展示的html方式
return drawHtml(data); }); } //END pulldownRefresh() 下拉刷新函数 /**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
obj.PageIndex++;//当前页累加，加载下一页的数据
console.log("加载第："+obj.PageIndex+"页");
console.log("页总数："+obj.pageCount); loadData(apiUrl,obj,1000,"up",function(data){
//此处实现动态绘制DOM的逻辑，根据数据源自行处理要展示的html方式
return drawHtml(data); }); } </script>
</body> </html>
页面
改进的问题：当单次数的下拉刷新会自动触发上拉加载。比如：第一次进行下拉，就会自动触发上拉加载，但是第二次就没有。
MUI实现上拉加载和下拉刷新的更多相关文章
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
- UITableView与UISearchController搜索及上拉加载，下拉刷新
#import "ViewController.h" #import "TuanGouModel.h" #import "TuanGouTableVi ...
- Vue-上拉加载与下拉刷新（mint-ui：loadmore）一个页面使用多个上拉加载后冲突问题
所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTop ...
- vue.js移动端app实战4：上拉加载以及下拉刷新
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...
- 移动端上拉加载，下拉刷新效果Demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue-scroller实现vue单页面的上拉加载和下拉刷新问题
在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...
- 使用mescroll实现上拉加载与下拉刷新
现在上拉加载与下拉刷新几乎已经是移动端必备功能之一了,自己实现一个太麻烦,但是好用的插件又非常少.之前看到网上很多人都在用iScroll,于是也尝试用它做了几个DEMO,但或多或少都有一些问题,比如这 ...
- 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
前段时间做项目由于采用的MD设计,所以必须要使用RecyclerView全面代替ListView.但是开发中遇到了需要实现RecyclerView上拉加载.下拉刷新和添加Header以及Footer等 ...
- vue使用vant-ui实现上拉加载、下拉刷新和返回顶部
vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...
- 全网最easy的better-scroll实现上拉加载和下拉刷新
前言 移动端页面常见的一种效果:下拉刷新(pulldownrefresh)和上拉加载(pullupload),目的都是为了增强用户的体验效果,因此各种移动端滑动插件也是层出不穷,今天小编也在这里给大家 ...
随机推荐
- U盘拷贝大文件提示文件过大无法拷贝解决方案
工具: 计算机 windows操作系统 U盘 原因:由于U盘的格式问题导致的,当期的磁盘格式是FAT32类型的,无拷贝过大的文件 方法:接下来修改U盘类型,且不格式化U盘 1.键盘win+R快捷键弹出 ...
- SpringCloud---API网关服务---Spring Cloud Zuul
1.概述 1.1 微服务架构出现的问题 及 解决: 1.1.1 前言 每个微服务应用都提供对外的Restful API服务,它通过F5.Nginx等网络设备或工具软件实现对各个微服务的路由与负载 ...
- mac下 mysql 插入中文乱码解决
搞了好几个小时,终于搞定了 乱码根本原因还是编码方式不同造成的,只要编码方式统一就没问题 1. 进入 mysql 命令行, 用 show variables like 'character_set_% ...
- 【ExtJS】FormPanel 布局(一)
准备工作,布置一个最简单的Form,共5个组件,都为textfield. Ext.onReady(function(){ Ext.create('Ext.form.Panel', { width: 5 ...
- Redis双机热备方案--转
http://luyx30.blog.51cto.com/1029851/1350832 参考资料: http://patrick-tang.blogspot.com/2012/06/redis-ke ...
- Codeforces 981F. Round Marriage
Description 一个长度为 \(L\) 的环上有 \(n\) 个黑点和 \(n\) 个白点 , 你需要把黑点和白点配对 , 使得配对点的最大距离最小 , 最小距离定义为两点在环上的两条路径的最 ...
- Hadoop实战之一~Hadoop概述
对技术,我还是抱有敬畏之心的. Hadoop概述 Hadoop是一个开源分布式云计算平台,基于Map/Reduce模型的,处理海量数据的离线分析工具.基于Java开发,建立在HDFS上,最早由Goog ...
- easyui表单校验拓展
/** * Created by chaozhou on 2016/5/30. */ /** * 扩展的基本校验规则, */ $.extend($.fn.validatebox.defaults.ru ...
- [编程] C语言变量和数据类型总结练习题
练习题: 1) 如何用 printf() 输出 short.int.long 类型的整数,请举例说明. 2) 如何用 printf() 输出 float.double 类型的小数,请举例说明. 3) ...
- PHP5中Static和Const关键字
(1) static static要害字在类中是,描述一个成员是静态的,static能够限制外部的访问,因为static后的成员是属于类的,是不属于任何对象实例,其他类是无法访问的,只对类的实例共享, ...