码迷,mamicode.com
首页 > 其他好文 > 详细

MUI 之上滑刷新和下拉加载示例

时间:2018-10-30 17:18:40      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:auto   下拉刷新   返回   UNC   ++   select   颜色   upper   jsonp   

1.首先要有下滑的元素  必须绑定有 mui 的  mui-scroll-wrapper样式   和一个容器标识 

  例如

    

		<div class="mui-content mui-scroll-wrapper" id="refreshContainer">
			<ul id="siteList">
			</ul> 
                </div>

2.然后就是配置 下拉和上滑组件的配置

			var Flag = false;
			mui.init({
			  pullRefresh : {
			    container:"#refreshContainer",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
			    up : {
   				height:10,//可选.默认50.触发上拉加载拖动距离
      				contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
      				contentnomore:‘没有更多数据了‘,//可选,请求完毕若没有更多数据时显示的提醒内容;
			        auto: false,//可选,默认false.首次加载自动上拉刷新一次
			        callback :upperSkid //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
			    },down : {
				    style:‘circle‘,//必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
				    color:‘#2BD009‘, //可选,默认“#2BD009” 下拉刷新控件颜色
				    height:‘50px‘,//可选,默认50px.下拉刷新控件的高度,
				    range:‘100px‘, //可选 默认100px,控件可下拉拖拽的范围
				    offset:‘0px‘, //可选 默认0px,下拉刷新控件的起始位置
				    auto: false,//可选,默认false.首次加载自动上拉刷新一次
				    callback :Refresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
				}
			  } 
			});
			function Refresh(){
			  Flag=false;
			   mui(‘#refreshContainer‘).pullRefresh().refresh(true);
			   resetData();
		      setTimeout(function () {
                          getSiteData();
                      }, 500);
                
			}
			function upperSkid(){
				//mui(‘#siteList‘).pullRefresh().endPullupToRefresh((Flag)); //参数为true代表没有更多数据了。
				page=pagesize*indexNum;
				setTimeout(function () {
                           mui(‘#refreshContainer‘).pullRefresh().endPullupToRefresh((Flag)); //参数为true代表没有更多数据了。
                              getSiteData();
                          }, 500);
			}

3.获取数据 的接口

function getSiteData(){
	$.ajax({
           url: "url",
           type: "GET", 
	   data: {},
           dataType: "jsonp", //指定服务器返回的数据类型
           jsonp: ‘callback‘,
           success: function (data) {
               var result = JSON.parse(data); //json对象转成字符串
	       if(result.total>0){
		    siteListData=siteListData.concat(result.rows);
		    showData(siteListData);	   //渲染数据函数
	       }else{
		    siteListData=[];
		    showData(siteListData);	
		}
		if(Flag == false){
                    indexNum++;
                }  
		if(result.rows.length<pagesize){    //判断  如果获取数据的数量小于每页查询的数量  就说明没有数据了
			Flag=true
		}
						
		mui(‘#refreshContainer‘).pullRefresh().endPulldown();

          }
      });  
}

  

  

MUI 之上滑刷新和下拉加载示例

标签:auto   下拉刷新   返回   UNC   ++   select   颜色   upper   jsonp   

原文地址:https://www.cnblogs.com/banyuege/p/9876579.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!