MUI 仿豆瓣电影 APP跨平台混编框架 -2（MUI系统学习总结）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/haoyuexihuai/article/details/86157486

5.CSS样式

overflow-x: 裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话
mui-pull-left:media list（图文列表）图文列表继承自列表组件
display:flex：弹性布局
mui-ellipsis：单行显示，显示bug可能 white-space: normal;

<div style="overflow-x: scroll;white-space: nowrap;padding-left: 15px;">
	<div style="display: inline-block;">
		<img :src="item.avatars.medium" style="width: 70px;height: 100px;margin-right: 10px;" />
		<div class="dark-micro mui-ellipsis" style="width: 70px;text-align: center;">演员姓名</div>
	</div>
</div>

//图文列表，图片居左
 <img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">

.group {
	display: flex;
	flex-flow: row nowrap;
	flex: 1 1 0;
	height: 200px;
	text-align: center;
}

.item {
	width: 50%;
	height: 100%;
	padding: 15px;
}

<div class="group">
	<div class="item">
		<div id="billboard_top" class="billboard" style="background: linear-gradient(#941AE6,#F1E0FC);background: -webkit-gradient(#941AE6,#F1E0FC);">
			<span class="billboard-title">
				豆瓣Top250
			</span>
		</div>
	</div>
	<div class="item">
		<div id="billboard_box" class="billboard" style="background: linear-gradient(#3370CC,#CEE1FD);background: -webkit-gradient(#3370CC,#CEE1FD);">
			<span class="billboard-title">
				北美票房榜
			</span>
		</div>
	</div>
</div>

6.页面显示加载中

showWaiting(),closeWaiting()

//添加movieId自定义事件
window.addEventListener("movieId", function(event) {
	//获取事件参数
	var id = event.detail.id;
	plus.nativeUI.showWaiting('加载中',{
		width:'100px',
		height:'100px'
	});
	//根据id请求电影详情数据
	mui.getJSON('http://api.douban.com/v2/movie/subject/'+id,function(resp){
		data_detail.title = resp.title;
		...
		plus.nativeUI.closeWaiting(); //关闭加载中提示
	})
});

7.plus.webview.currentWebview()

获取当前窗口的WebviewObject对象（HTML5规范）

mui.plusReady(function(){
	var self = plus.webview.currentWebview();
	//添加hide事件，清空页面数据，滚到最顶部
	self.addEventListener('hide',function(e){
		window.scrollTo(0,0);
		data_detail.resetData();
	},false);
})

8.详情页面跳转及数据传递

非预加载可以通过extras传递参数

open_detail:function(item){
	//打开演员详情页面
	mui.openWindow({
		id:'cast-detail',
		url:'./cast-detail.html',
		extras:{
			castId:item.id
		}
	});
}

//获取上一界面传过来的数据id
var self = plus.webview.currentWebview().castId;

9.获取接口数据及加载

方法：先定义数据 getDefaultData()，然后在vue中加载 var data_detail，mui.plusReady()中使用mui.getJSON获取接口数据

<script type="text/javascript">
	mui.init();
	function getDefaultData(){
		return{
			name:'',
			enName:'',
			cover:'',
			summary:'',
			works:[]
		}
	}
	
	//Vue对象
	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();
		//添加hide事件
		self.addEventListener('hide',function(e){
			window.scrollTo(0,0);//滚到顶部
			data_detail.resetData();//数据重置
		},false);
		plus.nativeUI.showWaiting('加载中',{
			width:'100px',
			height:'100px'
		});
		//获取接口数据
		mui.getJSON('http://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.large;
			data_detail.summary = resp.name+'，'+resp.gender+'，'+resp.born_place;
			data_detail.works = resp.works;
			plus.nativeUI.closeWaiting();
		})
	});
</script>