Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. Jearson Batanes Gomez
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    Jearson Batanes Gomez

    @Jearson Batanes Gomez

    0
    Reputation
    9
    Posts
    654
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    Jearson Batanes Gomez Follow

    Posts made by Jearson Batanes Gomez

    • RE: Create a Walkthrough Page using Onsen and vue

      @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?

      posted in Onsen UI
      Jearson Batanes Gomez
    • 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>
      posted in Onsen UI
      Jearson Batanes Gomez
    • 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"
      posted in Onsen UI
      Jearson Batanes Gomez
    • 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');
      
      }
      posted in Onsen UI
      Jearson Batanes Gomez
    • 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>
      posted in Onsen UI
      Jearson Batanes Gomez
    • 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?

      posted in Onsen UI
      Jearson Batanes Gomez
    • 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?

      posted in Onsen UI
      Jearson Batanes Gomez
    • 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)
      });
      

      //AppNavigator.vue

         <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>
      posted in Onsen UI
      Jearson Batanes Gomez