完整MUI 例子
假如3個頁面的例子，第一個是index.html，第二個html文件夾中建2個頁面moive_detail.html，第三個演員詳情頁cast_detail.html，此例子結合vue，主要知識點有頁面傳值方法，滾動到頂部，下拉刷新上拉加載，vue數據準備與數據綁定，mui接口調用，蒙版使用javascript
index.htmlcss
<!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.htmlhtml
<!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.htmlvue
<!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>
相關文章
- 1. sparkstreaming完整例子
- 2. epoll完整例子
- 3. mui-json的例子
- 4. java +bootstrap table 完整例子
- 5. Vuex-完整例子listTodo
- 6. rrdtool的完整例子
- 7. mui的ajax例子3
- 8. mui的ajax例子1
- 9. nginx完整配置文件例子
- 10. 函數式組件完整例子
- 更多相關文章...
- • PHP 完整表單實例 - PHP教程
- • MyBatis與Spring的整合實例 - MyBatis教程
- • 算法總結-股票買賣
- • 三篇文章瞭解 TiDB 技術內幕 —— 談調度
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. sparkstreaming完整例子
- 2. epoll完整例子
- 3. mui-json的例子
- 4. java +bootstrap table 完整例子
- 5. Vuex-完整例子listTodo
- 6. rrdtool的完整例子
- 7. mui的ajax例子3
- 8. mui的ajax例子1
- 9. nginx完整配置文件例子
- 10. 函數式組件完整例子