@Fran-Diox I just notice something the transition from the last page of walkthrough to the AppSpliter.vue is not smooth. I can see the first page of walkthrough.vue before seeing the AppSplitter.vue. Why is this? Is there something I can improve on?
Jearson Batanes Gomez
@Jearson Batanes Gomez
Posts made by Jearson Batanes Gomez
-
RE: Create a Walkthrough Page using Onsen and vue
-
RE: Create a Walkthrough Page using Onsen and vue
@Fran-Diox thanks my friend. I used your first method but I am getting not defined on the instance but reference during render. That is why I declare a new property newPageStack.
data(){ return { pageStack: [AppSplitter], newPageStack: [AppSplitter], options: {} }; }, <component @walkthrough-done="pageStack = newPageStack" v-for="page in pageStack" :is="page" :key="page" :page-stack="pageStack" :set-options="setOptions"> </component>
-
RE: Create a Walkthrough Page using Onsen and vue
@Fran-Diox thanks for the response. Yes, I already implemented the link you had given earlier but it is not working on my case. That’s why i followed the suggestion of
@misterjunio to assign pageStack to [AppSplitter] at the v-ons-navigator. What do you mean here :is=“walkthrough” ? I will assign the emitted value on the component?<component :is="walkthrough-done"
-
RE: Create a Walkthrough Page using Onsen and vue
@misterjunio It’s not working on my case. I tried to do your suggestion.
<v-ons-navigator :page-stack="pageStack" @walkthrough-done="pageStack = [AppSplitter]" :options="options"> <component v-for="page in pageStack" :is="page" :key="page" :page-stack="pageStack" :set-options="setOptions"> </component> </v-ons-navigator>
Walkthrough done method
done(){ // Vue.localStorage.remove('hasDoneWalkthrough'); Vue.localStorage.set('hasDoneWalkthrough', true); this.$emit('walkthrough-done'); }
-
RE: Create a Walkthrough Page using Onsen and vue
@misterjunio Thanks for the insight I already implemented it. But I cannot dismiss the walkthough when i click the done method on the Walkthrough.vue. I used this:
AppNavigator.vue
<v-ons-navigator :page-stack="pageStack" @push-page="pageStack.push($event)" :options="options"> <component v-for="page in pageStack" :is="page" :key="page" :page-stack="pageStack" :set-options="setOptions"> </component> </v-ons-navigator>
Walkthrough.vue
<v-ons-button @click="done">Start Using App</v-ons-button> <script> import AppSplitter from '../AppSplitter.vue'; export default { data() { return { } }, methods: { done(){ this.$emit('push-page', AppSplitter); } } } </script>
-
RE: Create a Walkthrough Page using Onsen and vue
@misterjunio Rather my question is how will I call the component I want in localstorage-vue?
-
RE: Create a Walkthrough Page using Onsen and vue
@misterjunio Thank you for your suggestion. I am implementing the library you suggested. In my AppNavigator I added the created hook, but how can I set the component I want to load first? Will I set it on the localstorage?
-
Create a Walkthrough Page using Onsen and vue
I have read this topic https://community.onsen.io/topic/246/walktrough/10 , however I cannot figure it out how to implement it on vue component. Can someone please help me implement this. What I want is that when i click on the start using app, the page will return to the AppNavigator.vue. Here is my code.
//index.js import CustomToolbar from './partials/CustomToolbar.vue'; import AppNavigator from './AppNavigator.vue'; import WalkThrough from './pages/WalkThrough.vue'; Vue.use(VueOnsen); Vue.component('custom-toolbar', CustomToolbar); const app = new Vue({ el: '#app', render: h => h(AppNavigator) });
<template> <v-ons-navigator :page-stack="pageStack" :options="options"> <component v-for="page in pageStack" :is="page" :key="page" :page-stack="pageStack" :set-options="setOptions"> </component> </v-ons-navigator> </template> <script> import AppSplitter from './AppSplitter.vue'; import WalkThrough from './pages/WalkThrough.vue'; export default { data(){ return { pageStack: [AppSplitter], options: {} }; }, methods: { setOptions(newOptions) { this.options = newOptions; } } } </script>
// Walkthrough.vue
<template> <v-ons-page> <v-ons-carousel fullscreen swipeable auto-scroll overscrollable :index.sync="carouselIndex" > <v-ons-carousel-item> <section class="hero is-primary"> <div class="hero-body"> <div class="container has-text-centered"> <img class=".walkthrough-image-1" src="../assets/accounting-image.png"> <a class="button is-primary">Continue</a> </div> </div> </section> </v-ons-carousel-item> <v-ons-carousel-item> <section class="hero is-success"> <div class="hero-body"> <div class="container has-text-centered"> <img class="walkthrough-image-2" src="../assets/accounting-review.png"> <a class="button is-primary">Start Using App</a> </div> </div> </section> </v-ons-carousel-item> </v-ons-carousel> </v-ons-page> </template>