mui的上拉刷新与下拉加载

最新推荐文章于 2022-04-25 04:05:04 发布

你的美，让我痴迷

最新推荐文章于 2022-04-25 04:05:04 发布

阅读量151

点赞数

本文链接：https://blog.csdn.net/weixin_45932157/article/details/103794500

版权

<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">
</head>

<body>
	<!--下拉刷新容器-->
	<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
		<div class="mui-scroll">
			<!--数据列表-->
		 <ul class="mui-table-view"  id="blogapp"> 
				<li class="mui-table-view-cell mui-media"   v-for="  item   in message" >
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-right"  v-bind:src=item.head >
						<div class="mui-media-body">
							{{item.title}} 
							<p class='mui-ellipsis'>{{item.sContent}}</p>
						</div>
					</a>
				</li> 
		 	</ul>
		</div>
	</div>
	<script src="js/mui.min.js"></script>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script>
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					callback: pulldownRefresh
				},
				up: {
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		/**
		 * 下拉刷新具体业务实现
		 */
		var count = 0;
		function pulldownRefresh() {
			setTimeout(function() {
				count++;
				var table = document.body.querySelector('.mui-table-view');
				var cells = document.body.querySelectorAll('.mui-table-view-cell');
				//for (var i = cells.length, len = i + 3; i < len; i++) {
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell';
					mui.get('http://m.tnblog.net/api/v1/home/'+count,function(data){
					var  content="";
					for (var  key  in  data.value){
					 var  strjson=data.value[key];
					 content+='<a href="javascript:;">';
						content+='<img class="mui-media-object mui-pull-right"src='+strjson.head+' >';
						content+='<div class="mui-media-body">';
							content+=''+strjson.title+'';
							content+='<p class="mui-ellipsis">'+strjson.sContent+'</p>';
						content+='</div>';
					content+='</a>';
					
					}
					li.innerHTML=content;
					});
					 
					//下拉刷新，新纪录插到最前面；
					table.insertBefore(li, table.firstChild);
				//}
				 
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
			}, 1500);
		}
		 
		/**
		 * 上拉加载具体业务实现
		 */
		 
		function pullupRefresh() {
			 
			setTimeout(function() {
				count++;
				var table = document.body.querySelector('.mui-table-view');
				var cells = document.body.querySelectorAll('.mui-table-view-cell');
				//for (var i = cells.length, len = i + 3; i < len; i++) {
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell';
					mui.get('http://m.tnblog.net/api/v1/home/'+count,function(data){
					var  content="";
					for (var  key  in  data.value){
					 var  strjson=data.value[key];
					 content+='<a href="javascript:;">';
						content+='<img class="mui-media-object mui-pull-right"src='+strjson.head+' >';
						content+='<div class="mui-media-body">';
							content+=''+strjson.title+'';
							content+='<p class="mui-ellipsis">'+strjson.sContent+'</p>';
						content+='</div>';
					content+='</a>';
					
					}
					li.innerHTML=content;
					});
					 
					//下拉刷新，新纪录插到最后面；
					table.insertBefore(li, table.lastChild);
				//}
				 
				mui('#pullrefresh').pullRefresh().endPullupToRefresh(); //refresh completed
			}, 1500);
		}
		contentrefresh(1);
	function  contentrefresh(page){
			mui.get('http://m.tnblog.net/api/v1/home/'+page,function(data){
						console.log(data);
						 
					var  vm=new Vue({
						  el: '#blogapp',
						  data: {
						    message: data.value
						  }
						}) 
					}); 
		}
        
	</script>
</body>

你的美，让我痴迷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
mui的上拉刷新与下拉加载

<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"> <met...
复制链接

扫一扫