I need to prevent scrolling to top on model update in angular 8 app.
I've tried saving scroll position and scrolling back to it after update, but this is visible to user and not good. I need a page to stay at the same place or getting back to it smoothly and quick.
I've also tried having the full model from the start to avoid updating it, but it is still needed in some cases.
You can use scrollIntoView:
#ViewChild("myElem") myElementToScroll: ElementRef;
this.myElementToScroll.nativeElement.scrollIntoView({block: 'start', behavior: 'smooth'});
You might want to check your routing. You might have a scroll to top in there. I am working in Angular 8, and my app doesn't scroll to the top on model update.
Related
Using Nativescript, where is the navigation in the SideDrawer stored? Should it be stored in application settings as a json string, or just loaded with an api call everytime it's needed?
every time you call $navigateTo or similar navigation strategy, you generate a kind of navigation entry (varying depending of your nativescript flavour) and this is used to tell to where back button should go if pressed.
Please note you might set clearHistory in order to take rid of the navigation entries stack.
If you use a Frame (Core / Vue) / page-router-outlet (Angular) as root for drawer content, the navigation history should be taken care by default.
Hitting the back button will automatically take you to previous page on the topmost frame's navigation stack.
I'm creating a workout tracking app and in order to switch between view controller I use WKInterfaceController.reloadRootControllers(withNames:contexts:) to load a single controller that in awake(withContext:) hides/shows some elements and changes the text in some some labels. No problem here but sometimes the view is not loaded correctly and appears to be shifted a little bit to left and stretched vertically cropping some of the text: as you can see in the screenshots below the left part of the A and 5 is missing as well as the bottom of NEXT: ... and the green button is not centered:
I've tried delaying the updates to the view by invoking the code via DispatchQueue.main.async { ... } but that does nothing unfortunately and the only way to fix the problem is to terminate and relaunch the app but as this is not possible from the watch I have to uninstall it and reinstall it again, even reloading again the root controller does not help (the second screenshot is after said reload). Someone has an idea why this is happening?
Project on GitHub, the controller with this problem is ExecuteWorkoutInterfaceController in ExecuteWorkoutIC.swift.
You should check your storyboard layout and also maybe not use WKInterfaceController.reloadRootControllers and just have a method that hides and shows elements.
In WP 8.1 Store app, how can I change page animation upon navigating to another page within the frame such that the current page stays still while the new page is animating on top of it by moving from the top of the screen to the bottom?
I'm currently animating my navigation like so:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
Frame.ContentTransitions = new TransitionCollection
{
new PaneThemeTransition{Edge = EdgeTransitionLocation.Top}
};
}
But this is animating both pages by moving the current one from bottom to top while the second one simultaneously moves from top to bottom. I'm also seeing a black background while the pages are moving for screen area that's not occupied by any content.
You unfortunately can not navigate to a different page and keep the previous page visible during the animation. That is why all page Transitions right now only support an In-Transition and an Out-Transition. We discussed the issue with Microsoft developers during this years //Build so I'm certain of this information.
If you really need that effect you can perhaps achieve it using a workaround. Instead of placing your content on separate pages you would create user controls and animate those while staying on a single page. This however can be a little tricky due to you manually having to manage "navigation" between the user controls instead of having the system deal with it for regular pages.
More information on how to implement animations in Windows Phone Silverlight Apps can be found in this article: http://msdn.microsoft.com/en-us/library/windows/apps/jj206955%28v=vs.105%29.aspx
I had a similar problem a while ago and it is kind of a workaround as well but it might do the trick for you.
You can place a Frame object taking all the available space on your current page. Then, instead of navigating from your current Page Frame, you navigate from the Frame object you put on top of your actual page.
The problem with this approach is that you would really "get rid" of the first page.
But this can work for you, or at least give you another insight of the problem.
I was wondering, I'm currently using a slide in and out page transition when the user presses a Next of Previous button on the appbar.
( concept: going through a set of articles inside a selected category )
This all looks great, I'm also able add the drag / flick gesture listeners to trigger this page transition... so no problems there.
But now I wanted to add the final part, when the user starts the drag / flick gesture, show this visually so that the page follows the gesture and 'slides' out of frame.
But how to do this? An example would be great :)
But there is also a small extra thing, I don't want the user to always do a full drag... so if we are over 2/3 of the screen, auto start the page transition IF the gesture stops ( so the user lifts up his finger )
So I would like to create a nice reading experience that shows the gesture visualy and performs the page transition...
You can check the following link: https://stackoverflow.com/a/9915016/1565574
In the ManipulationCompleted you'll be able to detect the GestureType and take an action there.
And I found that link: https://stackoverflow.com/a/4342558/1565574 (using the GestureService)
I first started with the DragFlickBehavior from #LocalJoost and it actually worked great!
But in the end I switched to a headerless pivot! Works also great!
I'm developing a Windows Phone 7 application that uses some Transient content.
To avoid to go back to that transient content I've decided to use a phew page with several grids on the same page.
When I have to show another "page" I set to collapsed current grid and then I set to visible desired grid.
I know this can be done using user control, but I'm not sure if using user controls can be slowest that using Grids. Any advice?
And another question is if I use grids, how can I use page transitions?
Another option for when you want to show transient content is to use a Popup control. This won't appear in the navigation stack, so when a user goes back (<-) they won't see this content.
However, Popup content isnt GPU accelerated, so you only want to display simple content, no animations etc...
If you want page transitions etc... then i think your only option is to use Pages. That way you can do the transitions and the back button works as expected.
It doesn't matter if you do this via user controls or grids - what matters speed wise is the complexity of your layout.
A user control may be better if you are doing this on a number of pages so you don't repeat yourself.
One way to do page transitions is to do it with stack panels. Have the second "hidden" stack panel way off to the right so it is off screen then animate it in.