As an example of 3 pages, the first is index.html, the second html folder is built with 2 pages moive_detail.html, and the third actor details page cast_detail.html, this example is combined with vue, the main knowledge points are pages Pass value method, scroll to the top, pull-down refresh and pull-up loading, vue data preparation and data binding, mui interface call, mask use
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>
<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" style="background:#fff;" id="content">
<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>
<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){
var directors=[];
for(var i=0;i<resp.directors.length;i++){
directors.push(resp.directors[i].name)
}
data_detail.title=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," / ");
plus.nativeUI.closeWaiting();
mask.close();
})
})
</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>