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>