专栏首页前端之攻略完整MUI 例子 原

完整MUI 例子 原

假如3个页面的例子,第一个是index.html,第二个html文件夹中建2个页面moive_detail.html,第三个演员详情页cast_detail.html,此例子结合vue,主要知识点有页面传值方法,滚动到顶部,下拉刷新上拉加载,vue数据准备与数据绑定,mui接口调用,蒙版使用

index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>

		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			html,
			body {
				background-color: #fff;
			}
			
			.mui-content {
				background: #fff;
			}
			
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				padding-bottom: 51px;
			}
			
			.wrap-search {
				margin: 15px;
				background: #f5f5f5;
				height: 30px;
				border-radius: 5px;
				text-align: center;
			}
			
			.item-img {
				width: 60px;
				height: 90px;
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" style="background:white;;">
			<div class="wrap-search">
				<span class="mui-icon mui-icon-search" style="line-height:30px;color:#aaa;font-size:16px;"></span>
				<span style="line-height:30px;color:#aaa;font-size:14px;">电影/电视/影人</span>
			</div>
			<div id="refreshContainer" class="mui-scroll-wrapper" style="top:0;padding-bottom:50px;">
				<div class="mui-scroll">
					<ul id="movies" class="mui-table-view">
						<li class="mui-table-view-cell" v-for="item in movies" @tap="open_detail(item)">
							<img v-bind:src="item.cover" alt="" class="item-img mui-pull-left" />
							<div class="mui-ellipsis dark-big">
								{{item.title}}
							</div>
							<div class="mui-ellipsis gray-small">
								<span class="gray-small">{{item.genres}}</span>
								<span v-if="item.score>0" class="orange-small">{{item.score}}分</span>
								<span v-else class="orange-small">暂无评分</span>
							</div>
							<div class="mui-ellipsis gray-small">
								导演:{{item.directors}}
							</div>
							<div class="mui-ellipsis gray-small">
								主演:{{item.casts}}
							</div>
						</li>
						<li class="mui-table-view-cell"></li>
					</ul>

				</div>
			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/util.js"></script>
		<script src="js/vue.min.js"></script>
		<script type="text/javascript">
			//(function() {
			//预加载电影详情页

			var data_movies = new Vue({
				el: "#movies",
				data: {
					movies: [],

				}
			})
			mui.init({
				swipeBack: true, //启用右滑关闭功能
				pullRefresh: {
					container: "#refreshContainer", //下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
					down: {
						style: 'circle', //必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
						auto: false, //可选,默认false.首次加载自动上拉刷新一次
						callback: refreshData //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
					},
					up: {
						height: 50, //可选.默认50.触发上拉加载拖动距离
						auto: true, //可选,默认false.自动上拉加载一次
						contentrefresh: "正在加载...", //可选,正在加载状态时,上拉加载控件上显示的标题内容
						contentnomore: '没有更多数据了', //可选,请求完毕若没有更多数据时显示的提醒内容;
						callback: loadMoreData //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
					}
				}
			});
			//刷新数据重新调用接口
			function refreshData() {
				mui.getJSON("https://api.douban.com/v2/movie/in_theaters", {
					start: 0,
					count: 10
				}, function(resp) {
					data_movies.movies.splice(0, data_movies.movies.length);
					data_movies.movies = data_movies.movies.concat(convert(resp.subjects));
					mui('#refreshContainer').pullRefresh().endPulldown();

				})
			}
			//请求下一页数据
			function loadMoreData() {
				mui.getJSON("https://api.douban.com/v2/movie/in_theaters", {
					start: data_movies.movies.length,
					count: 10
				}, function(resp) {
					data_movies.movies = data_movies.movies.concat(convert(resp.subjects));
					mui('#refreshContainer').pullRefresh().endPullupToRefresh(data_movies.movies.length == resp.total);

				})
			}
			var detailPage = null;
			var targetPage;
			mui.plusReady(function() {
				//var self = plus.webview.currentWebview(); // 创建子webview窗口 并初始化
				var self=plus.webview.currentWebview();
				//添加show事件,切换到首页时,滚到最顶部
				self.addEventListener("show",function(e){
					window.scrollTo(0,0);
				},false)
		
				var aniShow = {};
				util.initSubpage(aniShow);

				var nview = plus.nativeObj.View.getViewById('tabBar'),
					activePage = plus.webview.currentWebview(),
					targetPage,
					subpages = util.options.subpages,
					pageW = window.innerWidth,
					currIndex = 0;

				/**
				 * 根据判断view控件点击位置判断切换的tab
				 */
				nview.addEventListener('click', function(e) {
					var clientX = e.clientX;
					if(clientX > 0 && clientX <= parseInt(pageW * 0.33)) {
						currIndex = 0;
					} else if(clientX > parseInt(pageW * 0.33) && clientX <= parseInt(pageW * 0.67)) {
						currIndex = 1;
					} else if(clientX > parseInt(pageW * 0.67)) {
						currIndex = 2;
					}
					// 匹配对应tab窗口	
					if(currIndex > 0) {
						targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
					} else {
						targetPage = plus.webview.currentWebview();
					}

					if(targetPage == activePage) {
						return;
					}

					//底部选项卡切换
					util.toggleNview(currIndex);
					// 子页面切换
					util.changeSubpage(targetPage, activePage, aniShow);
//					 targetPage.addEventListener("show",function(e){
//					window.scrollTo(0,0);
//					console.log("顶部");
//				},false)
					//更新当前活跃的页面
					activePage = targetPage;
                   
				});
				//预加载页面
				detailPage = mui.preload({
					id: "moive-detail",
					url: "./html/moive_detail.html"
				});
			});

			//给搜索框添加点击事件
			mui(".wrap-search")[0].addEventListener("tap", function() {
				console.log("click....")
				mui.openWindow({
					id:"search",
					url:"./html/search.html"
				})
			})
			//mui(".mui-scroll-wrapper").scroll({})
			//请求热映列表接口

			function open_detail(item) {
				// 触发详情页面的movieId事件
				mui.fire(detailPage, 'moiveId', {
					id: item.id
				})
				// 打开预加载的电影详情页
				mui.openWindow({
					id: 'moive-detail'
				})
			}
			
			//数据转换
			function convert(items) {
				var newItems = [];
				items.forEach(function(item) {
					var genres = item.genres.toString().replace(/,/g, " / ");
					//导演
					var directors = '';
					for(var i = 0; i < item.directors.length; i++) {
						directors += item.directors[i].name;
						if(i != item.directors.length - 1) {
							directors += " / "
						}
					}
					//演员
					var casts = '';
					for(var i = 0; i < item.casts.length; i++) {
						casts += item.casts[i].name;
						if(i != item.casts.length - 1) {
							casts += " / "
						}
					}
					newItems.push({
						id: item.id,
						title: item.title,
						genres: genres,
						cover: item.images.large,
						score: item.rating.average,
						directors: directors,
						casts: casts

					})

				})
				return newItems;
			}

			//})();
		</script>
	</body>

</html>

moive_detail.html

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
		<style>
			.top-image-block {
				text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;
				background: #3c3c3c;
			}
			
			.mui-bar-nav {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			
			.mui-ellipsis-4 {
				display: -webkit-box;
				overflow: hidden;
				white-space: normal !important;
				text-overflow: ellipsis;
				word-wrap: break-word;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
			}
			
			.comment-head-photo {
				width: 30px;
				height: 30px;
				border-radius: 30px;
			}
			
			.mui-table-view {
				position: relative;
				margin-top: 0;
				margin-bottom: 0;
				padding-left: 0;
				list-style: none;
				background: #efeff4;
			}
			
			.mui-table-view:after {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				height: 0px;
				content: "";
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
				background-color: #c8c8cc
			}
			
			.mui-table-view:before {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				height: 1px;
				content: "";
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
				background-color: #c8c8cc
			}
			
			.mui-backdrop {
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 998;
				background-color: #f5f5f5;
			}
		</style>
	</head>

	<body>
		<div id="content">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">{{title}}</h1>
			</header>
			<div class="mui-content" style="background:#fff;">
				<div class="top-image-block">
					<img :src="cover" alt="" style="width:160px;height:240px;vertical-align:top" />
				</div>
				<div style="padding:15px;height:90px;">
					<div style="float:left">
						<span class="drak-big" style="display:block">{{title}}</span>
						<span class="gray-small">{{year}}/{{countries}}/{{genres}}</span>
						<span class="gray-small" style="display:block">{{directors}}导演作品</span>
					</div>
					<div style="width:60px;height:60px;background:#fff;float:right;text-align:center;box-shadow:0px 0px 10px #aaa">
						<span class="gray-small" style="display:block;vertical-align:middle;margin-top:5px;line-height:18px;">豆瓣评分</span>
						<span class="orange-big" style="display:block;line-height:20px;" v-if="score>0">{{score}}</span>
						<span class="orange-big" style="display:block;line-height:20px;" v-else>暂无评分</span>
						<span class="gray-small" style="display:block;line-height:15px;">{{ratingCount}}人</span>
					</div>
				</div>
				<div style="height:0.5px;background:#a2a2a2;margin-left:15px;"></div>
				<p class="gray-samll" style="margin:10px 0px 0px 15px">剧情简介</p>
				<p class="dark-medium mui-ellipsis-4" style="margin:0px 15px 0px 15px">{{summary}}</p>
				<p class="gray-small" style="margin:10px 0px 0px 10px">演员</p>
				<div style="overflow-x:scroll;white-space:nowrap;padding-left:15px;">
					<div class="" style="display:inline-block" v-for="item in casts" @click="open_detail(item)">
						<img :src="item.avatars.medium" alt="" style="width:70px;height:100px;margin-right:10px;" />
						<div class="dark-samll mui-ellipsis" style="width:70px;text-align:center;">{{item.name}}</div>
					</div>
				</div>
				<p class="dark-medius" style="margin-top:10px;text-align:center;background:#e6e6e6;height:40px;line-height:40px;">评论</p>
				<ul class="mui-table-view" style="background:white">
					<li class="mui-table-view-cell">
						<img src="" alt="" class="comment-head-photo mui-pull-left" />
						<div>
							<span class="dark-medium" style="line-height:30px;text-align:center;margin-left:10px;">
			    			hello world
			    		</span>
							<span class="gray-medium" style="line-height:30px;text-align:center;float:right">2017-8-5</span>
						</div>
						<p class="dark-medium" style="margin-left:40px;">这部电影非常棒</p>
					</li>
					<li class="mui-table-view-cell">
						<img src="" alt="" class="comment-head-photo mui-pull-left" />
						<div>
							<span class="dark-medium" style="line-height:30px;text-align:center;margin-left:10px;">
			    			hello world
			    		</span>
							<span class="gray-medium" style="line-height:30px;text-align:center;float:right">2017-8-5</span>
						</div>
						<p class="dark-medium" style="margin-left:40px;">这部电影非常棒</p>
					</li>
					<li class="mui-table-view-cell">
						<img src="" alt="" class="comment-head-photo mui-pull-left" />
						<div>
							<span class="dark-medium" style="line-height:30px;text-align:center;margin-left:10px;">
			    			hello world
			    		</span>
							<span class="gray-medium" style="line-height:30px;text-align:center;float:right">2017-8-5</span>
						</div>
						<p class="dark-medium" style="margin-left:40px;">这部电影非常棒</p>
					</li>
				</ul>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript">
			mui.init()
			//默认数据
			function getDefaultData() {
				return {
					title: "",
					cover: "",
					score: "",
					ratingCount: "",
					summary: "",
					countries: "",
					year: "",
					genres: "",
					casts: [],
					directors: []
				}
			}
			//vue对象

			var data_detail = new Vue({
				el: "#content",
				data: getDefaultData(),
				methods: {
					resetData: function() {
						//Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
						//语法 Object.assign(target, ...sources)
						//this.$data,实例属性与方法。它们都有前缀 $
						Object.assign(this.$data, getDefaultData())
					},
					open_detail: function(item) {
						//打开演员详情
						mui.openWindow({
							id: "cast-detail",
							url: "./cast-detail.html",
							extras: {
								castId: item.id
							}
						})
					}
				}
			})

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				//添加hide事件,清空页面数据,滚到最顶部
				self.addEventListener("hide", function(e) {
					window.scrollTo(0, 0);
					data_detail.resetData()
				}, false)
			})
			//添加movieId自定义事件
			window.addEventListener("moiveId", function(event) {
				var id = event.detail.id;
				console.log(id);
				var mask = mui.createMask();
				mask.show();
				plus.nativeUI.showWaiting("加载中", {
					width: "100px",
					height: "100px"
				})

				//根据id请求电影详情数据
//				mui.getJSON("https://api.douban.com/v2/movie/subject/" + id, function(resp) {
//					console.log(resp.error)
//					if(resp.code == 5000) {
//						plus.nativeUI.closeWaiting();
//						mask.close();
//						plus.nativeUI.alert("没有详细数据!");
//						mui.back();
//					} else {
//						var directors = [];
//						for(var i = 0; i < resp.directors.length; i++) {
//							directors.push(resp.directors[i].name)
//						}
//
//						data_detail.title = resp.title;
//						console.log(resp.title)
//						data_detail.cover = resp.images.large;
//						data_detail.score = resp.rating.average;
//						data_detail.ratingCount = resp.ratings_count;
//						data_detail.summary = resp.summary;
//						data_detail.countries = resp.countries.toString().replace(/,/g, " / ");
//						data_detail.year = resp.year;
//						data_detail.genres = resp.genres.toString().replace(/,/g, " / ");
//						data_detail.casts = resp.casts;
//						data_detail.directors = directors.toString().replace(/,/g, " / ");
//						console.log(data_detail.directors)
//						plus.nativeUI.closeWaiting();
//						mask.close();
//					}
//				})
				mui.ajax({
					url:"https://api.douban.com/v2/movie/subject/" + id,
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒;
					//加上下面的header会报错
//					headers: {
//						'Content-Type': 'application/json'
//					},
					success: function(resp) {
						var directors = [];
						for(var i = 0; i < resp.directors.length; i++) {
							directors.push(resp.directors[i].name)
						}

						data_detail.title = resp.title;
						console.log(resp.title);
						data_detail.cover = resp.images.large;
						data_detail.score = resp.rating.average;
						data_detail.ratingCount = resp.ratings_count;
						data_detail.summary = resp.summary;
						data_detail.countries = resp.countries.toString().replace(/,/g, " / ");
						data_detail.year = resp.year;
						data_detail.genres = resp.genres.toString().replace(/,/g, " / ");
						data_detail.casts = resp.casts;
						data_detail.directors = directors.toString().replace(/,/g, " / ");
						console.log(data_detail.directors)
						plus.nativeUI.closeWaiting();
						mask.close();
					    console.log("hi");
					},
					error: function(xhr, type, errorThrown) {
						//异常处理;
						console.log(xhr);
						console.log(type);
						console.log(errorThrown);
						
						plus.nativeUI.closeWaiting();
						mask.close();
						plus.nativeUI.alert("没有详细数据!");
						mui.back();
					}
				});
			})
		</script>
	</body>

</html>

cast_detail.html

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
		<style>
			.top-image-block {
				text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;
				background: #333;
			}
			
			.mui-backdrop {
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 998;
				background-color: #f5f5f5;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">影人</h1>
		</header>
		<div class="mui-content">
			<div class="top-image-block">
				<img :src="cover" alt="" style="width:160px;height:240px;vertical-align:top;" />
			</div>
			<div style="padding:15px;">
				<div class="dark-big">
					{{name}}
				</div>
				<div class="gray-medium">
					{{enName}}
				</div>
				<div class="gray-small">
					个人简介
				</div>
				<div class="gray-medium">
					{{summary}}
				</div>
			</div>
			<div class="gray-samll" style="padding-left:15px;">
				代表作品
			</div>
			<div style="overflow-x:scroll;white-space:nowrap;padding-left:15px;">
				<div style="display:inline-block" v-for="item in works">
					<img :src="item.subject.images.medium" alt="" style="widht:70px;height:100px;margin-right:10px;" />
					<div class="dark-small mui-ellipsis" style="width:70px;text-align:center">
						{{item.subject.title}}
					</div>
					<div class="orange-small mui-ellipsis" style="width:70px;text-align:center;line-height:20px;">{{item.subject.rating.average}}分</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript">
			mui.init()

			function getDefaultData() {
				return {
					name: "",
					enName: "",
					cover: "",
					summary: "",
					works: []
				}
			}
			var data_detail = new Vue({
				el: ".mui-content",
				data: getDefaultData(),
				methods: {
					resetData: function() {
						Object.assign(this.$data, getDefaultData())
					}
				}
			})
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var mask = mui.createMask();
				mask.show();
				plus.nativeUI.showWaiting("加载中", {
					width: "100px",
					height: "100px"
				})

				console.log("self,castID" + self.castId);
				mui.getJSON("https://api.douban.com/v2/movie/celebrity/" + self.castId, function(resp) {
					data_detail.name = resp.name;
					data_detail.enName = resp.name_en;
					data_detail.cover = resp.avatars.medium;
					data_detail.summary = resp.gender + "," + resp.born_place;
					data_detail.works = resp.works;
					plus.nativeUI.closeWaiting()
					mask.close();
				})
			})
		</script>
	</body>

</html>

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何在面试中发现优秀程序员?

    作为一个在软件行业混了十几年的老码农,对于这个问题其实有个不同的看法,优秀的程序员其实是自己培养出来的,因为程序员能否展示出优秀的特质和对环境的适应是有一定关系...

    程序员互动联盟
  • 计算机毕业大学生如何解决难就业问题?

    计科专业已经毕业十几年了一直从事着软件开发方面的工作,计算机毕业的大学生从事软件编程只是其中一个选择。计算机专业内部包含的种类也是非常繁多,毕业后能直接做的事情...

    程序员互动联盟
  • 目前大四学生去公司找个初级Java程序员的职位需要什么技能?

    初学者想要谋个职位主要还是看基础,从项目角度考量没有多少可比性,硬是要求一个刚毕业的学生能够具备很强的项目经验是一件很苛刻的事情,但现在的招聘单位还是喜欢在要求...

    程序员互动联盟
  • 在二线城市上班的程序员和在一线城市上班的程序员同样工作几年后,会有什么差距?

    作为一个在一线城市工作了十几年的老程序员,现在在三线城市混日子,程序员水平高低和在什么城市没有太直接的关系,这个问题的本质来讲一个程序员水平高低和环境因素到底差...

    程序员互动联盟
  • 现在12k的程序员,跟滴滴、外卖、快递相比,以后会有优势吗?

    行业之间进行比较没有多少可比性,可能就是表面上工资高低,上班时间长短,工作环境是否舒适等等,有些人单纯比较职业就是看基本工资,诚然薪资水平是判断一个职业的一个标...

    程序员互动联盟
  • 为什么一些程序员宁愿去小公司做项目组长也不愿意去学校做计算机老师?

    计科专业毕业从事嵌入式开发已经多年时间,现在的大学老师也不是谁能想进去就能进去的,程序员和大学计算机老师本质上来讲术业有专攻,虽然都是做着计算机相关的工作,但出...

    程序员互动联盟
  • 软件工程和计算机科学与技术的区别在哪?

    计科专业毕业已经从事软件开发多年,说到当初选择这个专业还是遵从父母的意愿,老人家们觉得计算机是个未来的趋势,如果做个计算机的老师岂不是很不错,于是在报考志愿的时...

    程序员互动联盟
  • 学什么编程语言以后不会过时?

    从事软件开发十几年,刚入行的时候C语言还是非常强势的一种编程,现在第一语言已经换成了JAVA,没有永不过时的编程语言,因为科技在进步,编程语言一样也在进步,不要...

    程序员互动联盟
  • 谷歌“验光师”AI算法,让可控核聚变早日成真!

    2018年人工智能成为重塑世界格局的关键。谷歌BERT模型刷新多项自然语言处理纪录,DeepMind则用星际争霸II对局再次引爆机器智能无限可能。阿里与华为分别...

    新智元
  • MySQL中的InnoDB 体系结构(中)

    在开始这部分内容之前,我们需要理清buffer和cache的差别,因为在数据库层面会有大量的buffer和cache的术语,我们在学习的时候非常容易混淆。

    jeanron100

扫码关注云+社区

领取腾讯云代金券