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),目的都是为了增强用户的体验效果,因此各种移动端滑动插件也是层出不穷,今天小编也在这里给大家 ...
随机推荐
- lua-nginx-module模块常用命令
ngx.location.capture 用法: local res = ngx.location.capture(uri, options) 发起一个同步非阻塞的nginx子请求,uri是inter ...
- 03-oracle数值函数
--round(数值,想要保留的位数如1.2.3),作用:保留小数取值时四舍五入select round(678.656) 不保留小数,round(678.456,1) 保留一位小数,round(67 ...
- db2 tsm backup fails with rc–50(1)
2015-01-05-19.21.54.477532+000 E8484227A347 LEVEL: Error PID : 10027058 TID : ...
- LINUX安装UNZIP
安装完linux ,发现没有UNZIP,没办法,重新安装. 1.获取unzip源码 sudo wget http://downloads.sourceforge.net/infozip/unzip55 ...
- 【随笔】使用apt-spy来更新你的debian源
debian什么最方便,当然是用apt-get intsall 命令来安装软件了.使用apt-get什么最重要,自然是下载源了. debian版本自带的源肯定不是最快的,考虑到个人所处的位置.网速等方 ...
- 为easyui添加多条件验证
easyui的验证框架,validatebox不能有效的支持多个条件的验证,比如中文用户名,既要验证其是中文,又要验证其长度不超过6位时便显得很繁琐,需要反复的为easyui添加验证规则. 在此实现一 ...
- Java TCP/IP与HTTP协议个人总结(原创)
首先举个例子方便理解: 1.应用层(http.ftp)就类似:淘宝.京东.易购等网购网站,主要用来负责选择购买商品(制定协议). 2.传输层(TCP.UDP)就类似:中通.申通等物流公司,主要负责传送 ...
- MySql的数据目录
数据目录的位置 MySQL数据目录的默认位置已经被编译到MySQL服务器程序里了. 在启动服务器时,通过使用一个--datadir=dir_name选项可以明确指定数据目录位置.把MySQL数据目录安 ...
- Atom编辑器汉化
Atom编辑器汉化成中文版 其他分享 7个月前 (04-04) 426浏览 0评论 Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器.小松今天看到了这个编辑器,而且感觉不错,推荐一下 ...
- Iterator和ListIterator的区别 ---面试题
Iterator和ListIterator的区别是什么? 下面列出了他们的区别: Iterator可用来遍历Set和List集合,但是ListIterator只能用来遍历List. Iterator对 ...