jquery Mobile uses Iscroll to dynamically load data for pull-down refreshes and pull effects

Do the pull-up and pull-up loading, the internet looked at countless code, helpless, I need to take data from the background, the web's all-in-one is posted on the official website code, for loop loading data, pull refresh, drop-down display more data, when they do, Since I am the background JSON parsing fetch, has not been shown the effect I want, and then after a few days, finally

<! DOCTYPE html>
 
. ui-li-heading {font-size:16px; font-weight:700; display:block; margin:. 6em 0; text-overflow:ellipsis; overflow:hid
Den
White-space:nowrap;
	} body,ul,li {padding:1;
	margin:0;
border:0;
	} body {font-size:12px;
    -webkit-user-select:none;
	-webkit-text-size-adjust:none;
Font-family:helvetica;
	} #header {Position:absolute; top:0;
	left:0;
	width:100%;
	height:0px;
	line-height:0px; Background-image:-webkit-gradient (linear, 0 0, 0 100%, color-stop (0, #fe96c9), Color-stop (0.05, #d51875), Color-stop (1,
	#7b0a2e));
	Background-image:-moz-linear-gradient (Top, #fe96c9, #d51875 5, #7b0a2e);
	Background-image:-o-linear-gradient (Top, #fe96c9, #d51875 5, #7b0a2e);
	padding:0;
	Color: #eee;
	font-size:20px;
Text-align:center;
	} #header A {color: #f3f3f3;
	Text-decoration:none;
	Font-weight:bold;
text-shadow:0 -1px 0 Rgba (0,0,0,0.5);
	} #footer {Position:absolute; bottom:0;
	left:0;
	width:100%;
	height:0px; Background-image:-webkit-gradient (linear, 0 0, 0 100%, Color-stoP (0, #999), Color-stop (0.02, #666), Color-stop (1, #222));
	Background-image:-moz-linear-gradient (Top, #999, #666 2, #222);
	Background-image:-o-linear-gradient (Top, #999, #666 2, #222);
	padding:0;
border-top:1px solid #444;
	} #wrapper {position:absolute; z-index:1; top:0px; bottom:0px;
	left:0;
	width:100%;
	Background: #f1f1f1;
Overflow:auto;

	} #scroller {position:relative;/*-webkit-touch-callout:none;*/-webkit-tap-highlight-color:rgba (0,0,0,0);
	Float:left;
	width:100%;
padding:0;
	}/** * * dropdown style pull down styles * */#pullDown, #pullUp {background: #fff;
	height:40px;
	line-height:40px;
	padding:5px 10px;
	border-bottom:1px solid #ccc;
	Font-weight:bold;
	font-size:14px;
Color: #888;
	} #pullDown. Pulldownicon, #pullUp. Pullupicon {display:block; float:left; width:40px;
	height:40px;
	Background:url (pull-icon@2x.png) 0 0 no-repeat; -webkit-background-size:40px 80px;
	background-size:40px 80px;
	-webkit-transition-property:-webkit-transform; -webkit-transition-duration:250ms; } #pullDown. Pulldownicon {-webkit-transform:rotate (0deg) translatez (0);} #pullUp. pullupicon {-webkit-transform:rot
Ate ( -180deg) Translatez (0);

} #pullDown. Flip. Pulldownicon {-webkit-transform:rotate ( -180deg) translatez (0);}

#pullUp. Flip Pullupicon {-webkit-transform:rotate (0deg) translatez (0);} #pullDown. Loading. Pulldownicon, #pullUp. Loading. Pullupicon {background-position:0
	100%;
	-webkit-transform:rotate (0deg) translatez (0);

	-webkit-transition-duration:0ms;
	-webkit-animation-name:loading;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
	} @-webkit-keyframes loading {from {-webkit-transform:rotate (0deg) translatez (0);}
to {-webkit-transform:rotate (360deg) translatez (0);}} /** about loading loading a circular picture **/. ui-icon-loading {background:url (images/ajax-loader.gif); background-size:46px 46px;} </ style> <script language= "JavaScript" >//Loading effect $ (document). Ready(function () {$.mobile.loading (' show ', {text: ' Load ... ',//loader displays text textvisible:true,//Whether the text is displayed  
	    Theme: ' d ',//loader theme style a-e Textonly:false,//whether to display only text HTML: ""//HTML content to display, such as pictures, etc.  
	    });
	 $ (' #pullDown '). Hide ();
	}) function Close () {$.mobile.loading (' hide ');
}//page finished loading first execute onload <span style= "White-space:pre" > </span>var ifs=true;
	<span style= "White-space:pre" > </span>var page=1; function Sstz () {$.ajax ({type: "Get", url: "http://**/ydbgpt/rest/query/getsjsstz?page=1", Data: "", DataType:
		
	"JSON", success:callback});
		} function callback (data) {var obj=eval (data);
		var tree= ""; if (obj.data.length!=0) {$.each (Obj.data,function (I,item) {$ ("#list"). Append ("<li><a onclick=sstzid ('" + item.url+ "') >" + "<strong> "+item.date+" &LT;/STRONG&GT;</p></a> "+" </li> ");
		}) $ ("#list"). ListView ("Refresh");
		Close ();
		Myscroll = new Iscroll (' wrapper ', {snap:false,checkdomchange:true,vscrollbar:true});
		Myscroll.refresh ();//This data in the previous chapter about the ListView, the data in the page loaded, but no scroll bar, plus this code is good ifs=true;
			}else{$ ("#message"). Text ("The network is unstable or the data is abnormal, please try again later");//When judging no data, pop-up Box $ ("#pop"). Popup ("open");
			Closes ();
			$ (' #pullDown '). Hide ();
		Ifs=false;
	}}//page after loading the circle disappears function closes () {$.mobile.loading ("hide");
	}//Click the title to jump to the article page var tzid= "";
		function Sstzid (URL) {//alert (URL);
		var id=url.split ("=");
		TZID=ID[2];
		alert (Tzid);
		$.cookies.set ("Tzid", Tzid);
	Document.location.href= "sstzart.html";

}//A bit is about iscroll pull up data processing, var myscroll, Pulldownel, Pulldownoffset, Pullupel, pullupoffset, generatedcount = 1;		/** * drop-down refresh (custom implementation of this method) * Myscroll.refresh (); After the data load is complete, call the interface Update method */function Pulldownaction () {if (Ifs==false) {//) This is when I drop the refresh to judge, when because the network or other reasons are not loaded, I pull down again to refresh the data $.ajax
	({type: "Get",		URL: "http://**/page=1", Data: "", DataType: "JSON", success:function (data) {var obj=eval (data); $.each (Obj.data,function (I,item) {$ ("#list"). Append ("<li><a onclick=sstzid ('" +item.url+ "') >" + "&lt ; IMG src= ' image/img "+i+". png '/> "+"