MUI实现上拉加载和下拉刷新效果


Posted in Javascript onJune 30, 2017

本文实例为大家分享了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);


      }

页面实现

<!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" rel="external nofollow" >
    <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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
javascript与有限状态机详解
May 08 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
JavaScript实现职责链模式概述
Jan 25 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
js实现京东轮播图效果
Jun 30 #Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 #jQuery
Vue和Bootstrap的整合思路详解
Jun 30 #Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 #Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 #Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 #Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 #Javascript
You might like
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
php自动加载方式集合
2016/04/04 PHP
php简单数据库操作类的封装
2017/06/08 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
详解vue路由
2020/08/05 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
常见python正则用法的简单实例
2016/06/21 Python
python实现八大排序算法(1)
2017/09/14 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
python中return不返回值的问题解析
2020/07/22 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
高级护理实习生自荐信
2013/09/28 职场文书
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
人事专员的职责
2014/02/26 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
浅析Python中的套接字编程
2021/06/22 Python
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
工厂无线对讲系统解决方案
2022/02/18 无线电