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),目的都是为了增强用户的体验效果,因此各种移动端滑动插件也是层出不穷,今天小编也在这里给大家 ...
随机推荐
- Oracle 通过数据字典查询系统信息
简介:数据字典记录了数据库系统的信息,他是只读表和视图的集合,数据字典的所有者是sys用户.注:用户只能在数据字典上执行查询操作,而维护和修改是由系统自己完成的. 1.数据字典的组成:数据字典包括数据 ...
- selenium+python(数据驱动测试)
自动化领域的两种驱动,对象驱动与数据驱动 数据驱动:测试数据的改变引起执行结果的改变 叫 数据驱动 关键字驱动:测试对象名字的改变起引起测试结果的改变 叫 关键字驱动 1 .读取文件参数化 以百度 ...
- Helper Devise: could not find the `Warden::Proxy` instance on request environment
在使用devise这个gem时,编写控制器层的单元测试,你需要在你的rspec帮助文件 rails_helper.rb里添加下面这一样 RSpec.configure do |config| conf ...
- AngularJS添加样式
AngularJS添加样式 通过controller.js中的某个$scope变量的值来决定div标签(或者其他html标签)的样式表. 示例 使用ng-style指令在div标签上 <body ...
- MariaDB10.2修改默认密码
1.修改 my.ini,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2.重启 mysqld 服务 3.使用 roo ...
- c#,利用WPF的ScaleTransform和TranslateTransform实现图片的缩放效果
一.缩放要求 1.缩放对象在可视区域内,已对象的中心点进行缩放. 2.缩放对象比可视区大,并且对象各边界都在可视区外围,那么已鼠标位置进行缩放. 3.缩放对象比可视区大,但是缩放后某一边界在可视区的对 ...
- 【关于eclipse的一些自己常用的插件】
代码自动走查: sonarlnt:
- 理解Xaml标记语言
理解XAML XAML基于XAML,因而具有与XAML相似的特性.在XAMl中,同样必须区分大小写,但是Xaml以.xaml作为扩展名,表示这是一个应用程序的标记扩展文件.WPF中的XAML主要用于创 ...
- 解决 Java 调用 Azure SDK 证书错误 javax.net.ssl.SSLHandshakeException
Azure 作为微软的公有云平台,提供了非常丰富的 SDK 和 API 让开发人员可以非常方便的调用的各项服务,目前除了自家的 .NET.Java.Python. nodeJS.Ruby,PHP 等语 ...
- gc原理小结
一.相关概念 基本回收算法 1. 引用计数(Reference Counting) 比较古老的回收算法.原理是此对象有一个引用,即增加一个计数,删除一个引用则减少一个计数.垃圾回收时,只用收集计数为0 ...