mpvue 從零開始 女友的衣裝 1 pages
阿新 • • 發佈:2018-11-02
pages
資料夾就像一個大櫥櫃,裡面放著各種精美的衣裝,你也可以理解為供小程式
的頁面。
1、製造衣服
我在pages
頁面下新建了3個頁面
- market 廣告市場
- task 任務中心
- my 個人中心
以market
為例,寫最簡單的程式碼
<template>
<div class="container" @click="clickHandle('test click', $event)">
market
</div>
</template>
2、註冊頁面
這時你需要關注app.json
pages
中填寫的頁面,可以被訪問
{
"pages": [
"pages/index/main",
"pages/logs/main",
"pages/counter/main",
"pages/market/main",
"pages/task/main",
"pages/my/main"
]
}
3、底部tab切換
配置app.json
檔案。
"tabBar": {
"selectedColor": "#145094",
"list": [
{
"pagePath" : "pages/market/main",
"text": "廣告市場",
"iconPath": "static/img/tab/market.png",
"selectedIconPath": "static/img/tab/market-selected.png"
},
{
"pagePath": "pages/task/main",
"text": "我的任務",
"iconPath": "static/img/tab/task.png",
"selectedIconPath" : "static/img/tab/task-selected.png"
},
{
"pagePath": "pages/my/main",
"text": "個人中心",
"iconPath": "static/img/tab/my.png",
"selectedIconPath": "static/img/tab/my-selected.png"
}
]
}
最後顯示效果達成