今天是很喪的一天，做什么都提不起興趣，不知道何時才能做到道家的“無為，而無所不為”，也無法理解范仲淹的“不以物喜不以己悲”，可是再沒興趣，學習還是要繼續！！！為了讓自己放松，去趟博物館，不但沒有起到放松心情的作用，反而累得自己腰酸背疼，苦逼的幾天，害，接下來還是干正事！
目錄
- 一、前提
- 二、模板檔案的創建
- 三、實作底部選項卡的功能
- 3.1打開main代碼
- 3.2創建底部選項卡頁面
- 3.3實作底部選項卡功能
- 3.4實作切換功能（此文重點）
- 四、擴展
一、前提
打開我們的HBuilder
回顧一下我們前面的知識，詳細點擊這里
為了借助MUI框架，我們需要建一個模板檔案哈哈哈
二、模板檔案的創建
新建一個移動App
自己命名，這里選擇Hello mui專案
這樣模板就建好了，先放這里
三、實作底部選項卡的功能
在hello.mui模板（新建mui專案：例如我這里是MUI_model）中找到examples檔案夾下的tab-webview-main.html ，并且復制到自己的專案中（比如我自己的專案為one），改名為main（也可以改名為其他的哈哈哈）
3.1打開main代碼
去掉../
因為這里的專案不用跳出上一級檔案夾
看到這里，我們可以看到這些href的鏈接，要鏈接到底部選項卡的頁面，接下來我們可以創建頁面了，
3.2創建底部選項卡頁面
新建index(原來有的可以不用新建) prolist car my
以index.html為栗子
雖然步驟很簡單，但是還是要剪出來，新建html檔案
切記這里點擊含mui的html檔案，后面幾個新建一樣的，類似的操作就好啦！
檔案建好以后，專案就是現在這個樣子
3.3實作底部選項卡功能
更改href的路徑
將底部選項卡的href修改為如下圖，而且span標簽里面的文字也可以自己設定
此時47行的代碼也要更著修改奧！
3.4實作切換功能（此文重點）
以my.html為例，實作切換
我們在body里面來撰寫一段代碼
(快捷鍵)
mb 回車 選擇mbody
ml 回車
然后自己再填寫相應的文字
my.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" />
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
我的訂單
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
修改密碼
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
反饋意見
</a>
</li>
<li class="mui-table-view-cell" id='btnaboutUs'>
<a class="mui-navigate-right">
關于我們
</a>
</li>
</ul>
</div>
</body>
</html>
實作功能：實作點擊關于我們，就回傳關于我們的這一頁
我們就是這一行去設定id（因為后面我們要呼叫它）
去js拿這個id
打開新頁面
參考代碼來源：https://dev.dcloud.net.cn/mui/window/
在my.html的body中輸入下面這個代碼，這個代碼的意思是拿到"關于我們"的Id,因為我們在my.html中設定了關于我們的id為btnAboutUs，addEventListener(“tap”,function()為點擊事件，這串代碼實作的功能就是點擊關于我們，就會出現關于我們頁面的資訊
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
document.getElementById("btnAboutUs").addEventListener("tap", function() {
var webview = mui.openWindow({
url: 'aboutUs.html',
extras: {
name: 'wangtiantian', //擴展引數
time: '2020-11-9'
}
});
// console.log("123") 用來除錯代碼
})
</script>
完整的就應該是
<!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" />
</head>
<body>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
我的訂單
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
修改密碼
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
反饋意見
</a>
</li>
<li class="mui-table-view-cell" id='btnAboutUs'>
<a class="mui-navigate-right">
關于我們
</a>
</li>
</ul>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
document.getElementById("btnAboutUs").addEventListener("tap", function() {
var webview = mui.openWindow({
url: 'aboutUs.html',
extras: {
name: 'wangtiantian', //擴展引數
time: '2020-11-9'
}
});
// console.log("123") 用來除錯代碼
})
</script>
</body>
</html>
這邊我們新建一個aboutUs.html（關于我們的頁面）
我們在body里面隨便寫點東西，例如mh回車，mb回車（選擇mbody），在div里面span回車
<!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" />
</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">
歡迎關注這個超級無敵可愛的人鴨！
<span id="authorBox">
</span>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</body>
</html>
可以修改一下頁面入口
這時候我們可以手機運行一下試試
點擊紅框內的東東
看運行結果：
(把手機開著)
從上圖我們可以看到index頁面有多余的東西
于是我們去到Index頁面
將標題和底部選項卡都刪了，于是就可以得到下面的代碼
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>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 額外增加的一個節點(回圈輪播：第一個節點是最后一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第一張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第二張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第三張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第四張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 額外增加的一個節點(回圈輪播：最后一個節點是第一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
</body>
</html>
再次運行我們的app，index看起來就舒服了，
怎么實作點擊“我的”中的“關于我們”就跳轉到關于我們頁面？
還記得我們剛剛在my.html中寫的這個點擊事件？在前面的打開新頁面中有介紹！
在aboutUs.html中輸入這段代碼，我們可以根據span的id=authorBox，把拿到的引數傳到上面的div中的span里面去，
這里需要注意一點的是引數是從my.html（我的）里面拿過來的
接下來，我們就可以在手機上面運行試一下，點擊“我的”中的“關于我們”就可以跳轉到關于我們頁面，
去實操一下就知道啦！
四、擴展
這邊再擴展幾個：如何給標題改背景顏色：
和寫前端是一樣的
例如：
第16行的<a class="mui-navigate-right" style="background-color: pink;">
<!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" />
</head>
<body>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" style="background-color: pink;">
我的訂單
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
修改密碼
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
反饋意見
</a>
</li>
<li class="mui-table-view-cell" id='btnAboutUs'>
<a class="mui-navigate-right">
關于我們
</a>
</li>
</ul>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
document.getElementById("btnAboutUs").addEventListener("tap", function() {
var webview = mui.openWindow({
url: 'aboutUs.html',
extras: {
name: 'wangtiantian', //擴展引數
time: '2020-11-9'
}
});
// console.log("123") 用來除錯代碼
})
</script>
</body>
</html>
顯示效果
如何更改圖示
到我們創建的模板中去找examples檔案夾，找到icons.html和icons-extra.html
打開他們，選取對應的你需要的圖示
比如說，我要修改我的Index頁面的微信圖示，如圖（此處需要修改）
因此，我們可以去到模板里面找到微信圖示對應的class名稱，然后，將這個名稱復制粘貼到剛剛我們要修改的地方去
如圖：此時我的index頁面的微信圖示就改變了，
注意：如果說我們用的是擴展圖示，也就是icons-extra.html，此時我們應該把擴展圖示樣式和字體也要拿到我們的專案中
比如說，我們要拿icons-extra.html的第一個圖示
我們就應該把模板當中的樣式和字體復制粘貼到自己的專案中去
然后再直接修改相應的代碼就可以啦！
大功告成！https://blog.csdn.net/hanhanwanghaha歡迎關注這個超級無敵可愛的人鴨，有什么問題留言私信皆可，看見必回！
如有轉載，請注明出處
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/211685.html
標籤：python