Posts made by misterjunio

@dvlwjoffice that’s unrelated to Onsen UI, if you are building hybrid apps you need a plugin such as this one for that.

@fearnowrath if you need to navigate between pages you probably need the <ons-navigator> element present. With respect to the reference page, if you use jQuery you can target the navigator the jQuery way but you still need to call its methods (I guess that’s the “list of functions” you are looking for?) to actually switch pages. When you push a new page the previous one is not destroyed.

@dvlwjoffice using <ons-row> and <ons-col> and adding your own extra styles should be good enough for most cases.

@Yohann3396 before turning to Onsen UI you should maybe understand Angular’s module and controller system on their own first.

In your example you probably only need one module with several controllers for your pages. What ons.bootstrap does is basically initialize a module for you so you don’t need to use ng-app, either use one or the other. You can also provide a module’s name as the first parameter of ons.bootstrap, (documentation here).

@pujapawar I think you’re looking for modifier="noshadow".

@Luke-Ward you can use ons.createElement() to create the <ons-carousel> and then append it to the DOM but you need to take care of the data manually.

@Gaurav like @Fran-Diox said it’s too hard to analyze the whole code, please try to produce a minimal example that shows the problem. You cannot use those components on a version prior to 2.3.0.

@Gaurav change all your classes with tab-bar to tabbar.

@Songkeys not after but it is indeed part of the DOM rendering. You can do what @Fran-Diox suggested or if you really want to use that hook you can wait for page init, when everything is already set up:

componentDidMount() {
  document.getElementById('yourPageId').addEventListener('init', function (event) {
    console.log('input initialized', document.getElementById('input1'));
  })
}

Be careful with the extra parenthesis in your logs ;)

@GiorgioB68 did you try using the regular page lifecycle events such as init or show?

@Songkeys not sure why but it seems like the DOM is not ready in your componentDidMount hook, can you try doing the same log on click of a button? I will have a look later at why that is happening, in principle I think it should work like you did

@Jearson-Batanes-Gomez since it will always be the AppSplitter where you want to go to, instead of pushing it you can throw another custom event from the Walkthrough and then reset the page stack manually in the AppNavigator. So in your done() method you could do something like this.$emit('walkthrough-done'); and get it in the navigator like @walkthrough-done="pageStack = [AppSplitter]".

@Jearson-Batanes-Gomez if I understood what you want correctly you should be able to simply store a boolean hasDoneWalkthrough in the localstorage. Then you check it in the created hook and, if it’s false, you set this.pageStack = [Walkthrough], otherwise this.pageStack = [AppSplitter]. This will put the page you want at the top of the page stack and therefore on the screen.

@Jearson-Batanes-Gomez what I would do is use something like the localstorage for Vue plugin as in the topic you mentioned to permanently save whether the user has been through the walkthrough or not. Then in your AppNavigator I would use the created hook to check the localstorage and decide between Walkthrough and AppSplitter for the initial page in the pageStack.

@Shubham-Kaushik are you able to replicate in other devices? That’s a very strange behavior, can’t think what would cause it

@Shubham-Kaushik in which phone and OS version is that happening?

@samphan that’s because onClick is a regular attribute for DOM elements, not a specific prop for ListItem, naturally you can use it in the regular way :+1:

@wetfeet check out this example.

@nipun.kr please refer to this repo. I didn’t understand if you need a “load more” type of infinite scroll or really a lazy-repeat, because you’re not using <v-ons-lazy-repeat> at all in your example. In any case that example I pointed you to has code for both (see src/pages/InfiniteScroll.vue).