やりたいこと
htmlファイルを開くことで、3つのタブをもつ画面を表示するようにしたい
現状
ページのタイトルは表示されるもののタブバーが表示されないため、表示する方法をご教示いただけますと幸いです。
#ソース
onsen UIのサンプルコードをもとに作成いたしました。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" /> </head> <body> <template id="main"> <v-ons-page> <v-ons-toolbar> <div class="center">{{ title }}</div> </v-ons-toolbar> <v-ons-tabbar swipeable position="auto" :tabs="tabs" :visible="true" :index.sync="activeIndex" > </v-ons-tabbar> </v-ons-page> </template> <template id="home"> <v-ons-page> <p style="text-align: center"> Welcome home.<br><br>{{ myProp }} </p> </v-ons-page> </template> <template id="news"> <v-ons-page> <p style="text-align: center"> Some news here. </p> </v-ons-page> </template> <template id="settings"> <v-ons-page> <p style="text-align: center"> Change the settings. </p> </v-ons-page> </template> <div id="app"></div> <!-- Vue --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> const homePage = { template: "#home", props: ["myProp"] }; const newsPage = { template: "#news" }; const settingsPage = { template: "#settings" }; new Vue({ el: "#app", template: "#main", data() { return { activeIndex: 0, tabs: [ { icon: "ion-home", label: "Home", page: homePage, props: { myProp: "This is a page prop!" }, key: "homePage" }, { icon: "ion-ios-bell", label: "News", page: newsPage, badge: 7, key: "newsPage" }, { icon: "ion-ios-settings", label: "Settings", page: settingsPage, key: "settingsPage" } ] }; }, methods: { // md() { // return this.$ons.platform.isAndroid(); // } }, computed: { title() { return this.tabs[this.activeIndex].label; } } }); </script> </body> </html>
あなたの回答
tips
プレビュー