Single page pull-down refresh and double page pull-down refresh of MUI

Single page (style Cannot write unit Otherwise, only one pull-down refresh )

#  Bind the container to which you want to bind the drop-down 
<div class="mui-content mui-scroll-wrapper" id="refreshContainer">
	<div class="mui-scroll">
		 Content 
	</div>
</div>


#  To configure  mui.init() 
mui.init({
    
	pullRefresh: {
    
		container: "#refreshContainer", // Drop down refresh container ID ,querySelector Able to locate css All selectors , such as ：id、.class etc. 
		down: {
    
			style: 'circle', // Mandatory , Drop down refresh style , Currently supports native 5+ ‘circle’  style 
			color: '#2BD009', // Optional , Default “#2BD009”  Drop down refresh control color 
			height: '50', // Optional , Default 50px. Drop down refresh control height ,
			range: '100', // Optional   Default 100px, Control can be dragged down the range 
			offset: '0p', // Optional   Default 0px, Drop down to refresh the start of the control 
			auto: true, // Optional , Default false. First load auto pull up refresh once 
			callback: callfunction // Mandatory , Refresh function , Write according to specific business , Such as through ajax Get new data from the server ;
		}
	}
});

#  After the configuration data is updated, the pull-down refresh is folded 
function callfunction() {
    
	setTimeout(function() {
     // Timer , Enhance user experience 
		mui.toast(' Updated 5 An article ');
		mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); // Complete refresh 
	}, 1500);
}

Double page drop-down refresh data

#  Configure paging first 
#index.html in 
#body part 
<!-- Drop down refresh container -->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
  
    <!-- Displayed button.html  The page data -->
    
  </div>
</div>

mui.init({
    
				subpages: [
					{
    
					url: 'button.html', // Subpage HTML Address , Support local address and network address 
					id: 'button.html', // Subpage flag 
					styles: {
    
						top: '45px', // Top of subpage 
						bottom: 0, // Sub page bottom position =
					},
					extras: {
    } // Additional extension parameters 
				}],
				swipeBack:true ,// Enable right slide close function 
				statusBarBackground: '#000000'
			})
}

# Subpage section 
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
		  <div class="mui-scroll">
		    <!-- Data list -->
		   
		  </div>
		</div>



mui.init({
    
			  pullRefresh : {
    
			    container:"#refreshContainer",// Drop down refresh container ID ,querySelector Able to locate css All selectors , such as ：id、.class etc. 
			    down : {
    
			      height:50,// Optional , Default 50. Trigger pull down refresh drag distance ,
			      auto: false,// Optional , Default false. First load automatic pull-down refresh once 
			      contentdown : " Drop down to refresh ",// Optional , When the dropdown can refresh the status , Pull down to refresh the title content displayed on the control 
			      contentover : " Release refresh now ",// Optional , When a refreshable state is released , Pull down to refresh the title content displayed on the control 
			      contentrefresh : " Refreshing ...",// Optional , While refreshing state , Pull down to refresh the title content displayed on the control 
			      callback : pullfreshFunction // Mandatory , Refresh function , Write according to specific business , Such as through ajax Get new data from the server ;
			    }
			  }
			});
			function pullfreshFunction() {
    
				setTimeout(function() {
     // Timer , Enhance user experience 
					mui.toast(' Updated 5 An article ');
					mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); // Complete refresh 
				}, 1500);
			}