完整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({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018/05/02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读