涉及到知識點：
- vue.js
- 首頁底部Tab
- banner廣告
- 沉浸式狀態(tài)欄
- 分類頂部切換的slider
- 圖片預(yù)覽并保存到相冊
- 拍照、掃碼、選擇本地文件
- 側(cè)滑欄
- 搜索列表頁兩層側(cè)滑欄篩選
- 上拉刷新下拉加載
- 登錄、退出邏輯處理
主要功能點：
首頁商品展示，商品分類，搜索列表汗销，商品詳情，購物車抵窒，下訂單弛针，個人中心，我的訂單/退單李皇，收貨地址管理
示例圖片
部分示例圖片
遇見的問題
- 首頁底部的Tab
html頁面
<nav class="mui-bar mui-bar-tab footerBar">
<a id="defaultTab" class="mui-tab-item ft-tab-item mui-active" href="home.html">
<span class=" mui-icon iconfont icon-m-ao"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a id="tab1" class="mui-tab-item ft-tab-item" href="classify.html">
<span class="mui-icon iconfont icon-m-am"></span>
<span class="mui-tab-label">分類</span>
</a>
<a id="tab2" class="mui-tab-item ft-tab-item" href="cart.html">
<span class="mui-icon iconfont icon-m-y"></span>
<span class="mui-tab-label">購物車</span>
</a>
<a id="tab3" class="mui-tab-item ft-tab-item" href="my.html">
<span class="mui-icon iconfont icon-m-aq"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
js代碼
//底部選項卡切換跳轉(zhuǎn)
(function jumpPage() {
//跳轉(zhuǎn)頁面
var subpages = ['view/home/home.html', 'view/home/classify.html', 'view/home/cart.html', 'view/home/my.html'];
var ids = ['home.html', 'classify.html', 'cart.html', 'my.html'];
var aniShow = {};
//創(chuàng)建子頁面削茁，首個選項卡頁面顯示，其它均隱藏掉房；
mui.plusReady(function() {
plus.screen.lockOrientation("portrait-primary");
var subpage_style = {
top: '0px',
bottom: '51px'
};
//設(shè)置bottom絕對位置
//iphoneX中出現(xiàn)遮擋底部tab現(xiàn)象,采用js判斷屏幕大小方式改變bottom值
//isIPhoneX() 要在plusReady后調(diào)用
if (isIPhoneX()) {
subpage_style = {
top: '0px',
bottom: '88px', //34px
styles: {
"render": "always",
}
};
}
var self = plus.webview.currentWebview();
for (var i = 0; i < 4; i++) {
var temp = {};
var sub = plus.webview.create(subpages[i], ids[i], subpage_style);
if (i > 0) {
sub.hide();
} else {
temp[ids[i]] = "true";
mui.extend(aniShow, temp);
}
self.append(sub);
}
});
//當(dāng)前激活選項
var activeTab = ids[0];
//選項卡點擊事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
e.preventDefault();
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//顯示目標(biāo)選項卡
//若為iOS平臺或非首次顯示茧跋，則直接顯示
if (mui.os.ios || aniShow[targetTab]) {
plus.webview.show(targetTab);
} else {
//否則，使用fade-in動畫卓囚，且保存變量
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow, temp);
plus.webview.show(targetTab, "fade-in", 300);
}
//隱藏當(dāng)前;
plus.webview.hide(activeTab);
//更改當(dāng)前活躍的選項卡
activeTab = targetTab;
});
})()
注意iphoneX中出現(xiàn)遮擋底部tab現(xiàn)象,采用js判斷屏幕大小方式改變bottom值瘾杭，isIPhoneX()，isIPhoneX() 要在plusReady后調(diào)用哪亿。
- 沉浸式狀態(tài)欄
1.在manifest.json文件粥烁，切換到代碼視圖贤笆，在plus -> statusbar 下添加immersed節(jié)點并設(shè)置值為true
"statusbar" : {
"immersed" : true
},
2.__設(shè)置了沉浸式狀態(tài)欄后，狀態(tài)欄的高度變?yōu)?页徐，如圖所示
輸入框把狀態(tài)擋住了苏潜，這時候需要重寫mui.css或者mui.min.css樣式表银萍，在樣式表底部添加如下一段樣式__：
*解決沉寖式狀態(tài)欄導(dǎo)致導(dǎo)航欄高度少20px的問題*/
.mui-bar-nav {
height: 64px;
padding-top: 22px;
}
.mui-bar-nav ~ .mui-content
{
padding-top: 64px;
}
.mui-bar-nav ~ .mui-content .mui-pull-top-pocket
{
top: 64px;
}
.mui-bar-nav ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical
{
top: 64px;
}
.mui-bar-nav ~ .mui-content .mui-slider.mui-fullscreen
{
top: 64px;
}
顯示效果如圖
注意：以上操作后Android沉浸式狀態(tài)就完成了变勇，但是IOS還需在distribute節(jié)點下的apple節(jié)點下添加
"UIReserveStatusbarOffset" : false
本以為沉浸式狀態(tài)欄就完成了，結(jié)果老板iPhoneX手機顯示有問題贴唇，于是又單獨適配iPhoneX搀绣，具體操作：
在mui.js或者mui.min.js中底部添加如下一段代碼：
/**
* 適配iPhone X 系列手機的導(dǎo)航欄(包括狀態(tài)欄)
*/
mui.plusReady(function(){
if(plus.navigator.isImmersedStatusbar() && isIPhoneX()){
//.mui-bar-nav
var nav = document.querySelector(".mui-bar-nav");
if(nav){
nav.style.cssText="height:88px; padding-top: 44px;";
} else {
return;
}
//.mui-bar-nav ~ .mui-content
var content = document.querySelector(".mui-content");
if (content) {
content.style.paddingTop = "88px";
} else {
return;
}
//.mui-bar-nav ~ .mui-content .mui-pull-top-pocket
var pullTopPocket_Arr = content.querySelectorAll(".mui-pull-top-pocket");
if (pullTopPocket_Arr) {
pullTopPocket_Arr.forEach(function(value){
value.style.top = "88px";
});
}
//.mui-bar-nav ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical
var scrollbarVertical = document.querySelector(".mui-content.mui-scroll-wrapper .mui-scrollbar-vertical");
if (scrollbarVertical) {
scrollbarVertical.style.top = "88px";
}
//.mui-bar-nav ~ .mui-content .mui-slider.mui-fullscreen
var slider_fullscreen_Arr = content.querySelectorAll(".mui-content .mui-slider.mui-fullscreen");
if (slider_fullscreen_Arr) {
slider_fullscreen_Arr.forEach(function(value){
value.style.top = "88px";
});
}
}
});
/**
* 判斷是否為iPhone X 系列機型
*/
function isIPhoneX(){
if(plus.device.model.indexOf('iPhone') > -1 && screen.height >= 812){
return true;
}else{
return false;
}
}
- 標(biāo)題欄在IOS上存在的問題
原生標(biāo)題欄
var styles = { // 窗口參數(shù) 參考5+規(guī)范中的WebviewStyle,也就是說WebviewStyle下的參數(shù)都可以在此設(shè)置
titleNView: { // 窗口的標(biāo)題欄控件
titleText: title, // 標(biāo)題欄文字,當(dāng)不設(shè)置此屬性時，默認(rèn)加載當(dāng)前頁面的標(biāo)題戳气，并自動更新頁面的標(biāo)題
titleColor: "#FFFFFF", // 字體顏色,顏色值格式為"#RRGGBB",默認(rèn)值為"#000000"
backgroundColor: "#E60012", // 控件背景顏色,顏色值格式為"#RRGGBB",默認(rèn)值為"#F7F7F7"
autoBackButton: true
}
}
plus.webview.create(url, id, styles, extras);
1.mui原生標(biāo)題欄链患，假如titleColor的值為小寫（#ffffff）的話，在IOS上不顯示標(biāo)題瓶您，必須要大寫（#FFFFFF）才顯示麻捻，親測
2.非原生標(biāo)題欄，假如頁面中有輸入框的話呀袱，軟鍵盤彈出贸毕，IOS上會把標(biāo)題欄頂上去，因為ios彈出軟鍵盤的時候夜赵，webview的高度沒有變化導(dǎo)致超出屏幕范圍明棍，
而plus這時候又會自動把header的 position：fixed 屬性設(shè)置為 position：relative，header就跟著滾動了寇僧。在mui社區(qū)找到一個的解決方案：
http://ask.dcloud.net.cn/question/10629
plus.webview.currentWebview().setStyle({
softinputMode: "adjustResize" // 彈出軟鍵盤時自動改變webview的高度
});
html, body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
.mui-content {
height: 100%;
overflow: auto;
}
這樣會解決IOS標(biāo)題欄頂上去的問題摊腋，但是這樣處理后，頁面打開標(biāo)題欄會有抖動嘁傀，雖然很短暫兴蒸，但是看著不爽,有更好的方案可以聯(lián)系我（QQ742330561）
支付問題
mui的支付還是比較好配置的，詳細(xì)的參照http://ask.dcloud.net.cn/article/71側(cè)滑導(dǎo)航主體內(nèi)容設(shè)置下拉刷新和上拉加載后不能滾動的問題
使用div側(cè)滑欄的時候细办，給側(cè)滑欄主題設(shè)置了下拉刷新和上拉加載
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
style: 'circle',
callback: pulldownRefresh
},
up: {
auto: false,
contentrefresh: '正在加載...',
callback: pullupRefresh
}
}
});
橙凳，頁面不能滾動，把這段代碼注釋掉后就能滾動了蟹腾，不知道是不是mui的bug痕惋，還是我沒找到合適的方法。
下面推薦webview模式側(cè)滑菜單
//plusReady事件后娃殖，自動創(chuàng)建menu窗口值戳；
main = plus.webview.currentWebview();
//setTimeout的目的是等待窗體動畫結(jié)束后，再執(zhí)行create webview操作炉爆，避免資源競爭堕虹，導(dǎo)致窗口動畫不流暢卧晓；
setTimeout(function() {
menu = mui.preload({
id: 'class-menu',
url: 'class-menu.html',
styles: {
left: "20%",
width: '80%',
zindex: 10000
}
});
}, 500);
詳細(xì)查看demo的view/search/search.html和view/search/class-menu.html兩個文件。
- 下拉刷新和其他控件的沖突
可以在控件某個事件觸發(fā)的時候赴捞，禁止?jié)L動下拉刷新逼裆，事件結(jié)束后在開啟
mui('#pullrefresh').pullRefresh().setStopped(true);//暫時禁止?jié)L動
mui('#pullrefresh').pullRefresh().setStopped(false);//開啟禁止?jié)L動
注意判斷mui('#pullrefresh').pullRefresh()是否為空，否則會報錯
項目地址
歡迎轉(zhuǎn)載赦政，但是請注明出處
如果對您有幫助胜宇，您可以 "Star" 支持一下哦， 謝謝恢着！ ^^
該項目的數(shù)據(jù)和圖片來自網(wǎng)絡(luò)桐愉，均只用于案例展示，請勿用于其他用途掰派。
