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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
Vue.use源码学习小结
Jun 20 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
Prototype Object对象 学习
2009/07/12 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
JS实现手风琴特效
2020/11/08 Javascript
Python 爬虫多线程详解及实例代码
2016/10/08 Python
python实现自动发送邮件
2018/06/20 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
Python如何计算语句执行时间
2019/11/22 Python
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
精彩广告词大全
2014/03/19 职场文书
公司担保书范文
2014/05/21 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
大学生交通专业求职信
2014/09/01 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
2015新学期开学寄语
2015/02/26 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电