豆瓣电影APP首页热映部分MUI+JS，豆瓣电影APi调用

最新推荐文章于 2024-05-08 14:22:04 发布

wujingj

最新推荐文章于 2024-05-08 14:22:04 发布

阅读量1.8k

点赞数 1

分类专栏： MUI 文章标签： MUI 豆瓣API 豆瓣电影APP MUI上拉加载更多

本文链接：https://blog.csdn.net/sinat_19803127/article/details/79854017

版权

MUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏


		<style>
			html,
			body {
				background-color: white;
			}
			
			.wrap-search {
				margin: 15px;
				background: #E6E6E6;
				height: 30px;
				border-radius: 5px;
				text-align: center;
			}
			
			.item-img {
				width: 60px;
				height: 90px;
				margin-right: 10px;
			}
			
			.orange {
				color: orange;
				font-size: 14px;
			}
			
			.gray-small {
				color: #A2A2A2;
				font-size: 14px;
			}
		</style>


	</head>


	<body>
		<div class="mui-content" style="background: white;padding-bottom: 40px;">
			<div class="wrap-search">
				<span class="mui-icon mui-icon-search" style="line-height: 30px;color: #AAAAAA;font-size: 16px;"></span>
				<span style="line-height: 30px;color: #AAAAAA;font-size: 14px;">电影/电视剧/影人</span>
			</div>
		</div>
		<div id="refreshContainer" class="mui-scroll-wrapper" style="top: 50px;">
			<div class="mui-scroll">
				<ul id="movies" class="mui-table-view">
					
				</ul>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
		    <a class="mui-tab-item mui-active">
		        <span class="mui-icon mui-icon-home"></span>
		        <span class="mui-tab-label">热映</span>
		    </a>
		    <a class="mui-tab-item">
		        <span class="mui-icon mui-icon-search"></span>
		        <span class="mui-tab-label">搜索</span>
		    </a>
		    <a class="mui-tab-item">
		        <span class="mui-icon mui-icon-gear"></span>
		        <span class="mui-tab-label">设置</span>
		    </a>
		</nav>
		<script type="text/javascript" charset="utf-8">
			
			mui.init({
				pullRefresh: {
					container: '#refreshContainer',
					up: {
						auto: false,
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});

                        var listDatas;//获取的数据
			var count = 0;//页数
			mui.plusReady(function() {
				indexApi()；//j加载列表页面
			})
			//请求最近热映电影接口		
			function indexApi() {
				mui.ajax('https://api.douban.com/v2/movie/in_theaters', {
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						listDatas = data.subjects;
						if(data.subjects.length > 0) {
							showIndexList(listDatas)
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						console.log(type);
					}
				});


			}
			//加载热映电影列表
			function showIndexList(data) {
				var table = document.body.querySelector('.mui-table-view');
				var cells = document.body.querySelectorAll('.mui-table-view-cell');
				var newCount = 5; //首次加载为5条
				for(var i = cells.length, len = i + newCount; i < len; i++) {
					var imgSrc = data[i].images.small;//电影海报
					var title = data[i].title；//电影标题
					var genres = data[i].genres.toString().replace(/,/g, ' / ');//逗号替换成斜杠，电影类型
					var average = data[i].rating.average;//评分
					var directors = data[i].directors[0].name;//导演
					//演员
					var casts = '';//主演
					for(var j = 0; j < data[i].casts.length; j++) {
						casts += data[i].casts != "" ? data[i].casts[j].name : "";//casts字段可能为空
						if(j != data[i].casts.length - 1) {
							casts += ' / ';
						}
					}
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell';
					li.innerHTML = '<img class="mui-pull-left item-img" src="' + imgSrc + '" />' +
						'<h4 class="mui-ellipsis">' + title + '</h4>' +
						'<div class="mui-ellipsis">' +
						'<span class="gray-small">' + genres + '</span> ' +
						'<span class="orange">' + average + '分</span>' +
						'</div>' +
						'<div class="mui-ellipsis gray-small">导演：' + directors + '</div>' +
						'<div class="mui-ellipsis gray-small">主演：' + casts + '</div>';
					table.appendChild(li);
				}
			}

                    //上拉加载更多
			function pullupRefresh() {
				//这里很重要，这里获取页码 公式：总条数/每页显示条数
				var totalPage = listDatas.length % 5 != 0 ? parseInt(listDatas.length / 5) + 1 : listDatas.length / 5;
				var flag = ++count > (totalPage - 1)
				setTimeout(function() {
				mui('#refreshContainer').pullRefresh().endPullupToRefresh(flag); //参数为true代表没有更多数据了。
					if(flag==false){
						indexApi()
					}else{
						mui.toast("无更多数据")
					}
					
				}, 1500);
			}
		</script>
	</body>

wujingj

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
豆瓣电影APP首页热映部分MUI+JS，豆瓣电影APi调用

&lt;style&gt; html, body { background-color: white; } .wrap-search { margin: 15px; background: #E6E6E6; height: 30px; border-radius: 5px; text-align: center;...
复制链接

扫一扫