Working on a car dealership site and playing with vue router.
The issue currently is that I have a homepage with a grid of vehicle, when clicking to view one on its own page I have to wait for the random parts to load in ,which causes page height jumps etc.
Is there a way I can trigger the view to load a method but only change the route and view when I say to (api has returned a response)?
On YouTube for example, you click a link and get the progress bar before the view changes.
Thanks.
The issue with your page height jump could be resolved by this.
As for pre-loading the data, you can use the beforeRouteEnter() function, here.
Related
I am creating an app with a Leaflet map in Nuxt using Vue2Leaflet plugin.
I am having a problem though: I am using Bootstrap columns to size the map and accompanying image, but the image loads too slow (this cannot be resolved at this time), so the container is not the proper size when the map loads.
This causes the map to be half grey. I have attempted to call map.invalidateSize() in the mounted event, but even that must be happening before the image finishes loading.
I have setup a sandbox at: https://codesandbox.io/s/eager-bohr-c3453?file=/src/App.vue
In order to see the bug, you have to view the rendered app at https://c3453.csb.app/ (the internal codesandbox render does not show the problem)
I think I need some way to wait until the image has completed loading (so the BS col is the proper size), then call map.invalidateSize(), but I am not sure how...
You can attach an onload listener on your <img>, so that you can call (again?) your Leaflet map invalidateSize() method.
I would like my app to keep the same scrolling position when navigating back to one of my routes. It is working if I navigate back using the back button of my browser but when I click on a link (created with nuxt-link) the scroll position resets to 0 when navigating to my route.
I tried replacing the scrollBehavior function in nuxt.config.js with my own. The function is called but the savedPosition parameter is null so it's obviously the reason why the scroll position is reset. Again, if I use the back button of my browser instead of clicking a link from an other route, then there is no problem, the savedPosition parameter is set to its expected value and the scrolling happens. I don't understand why it doesn't work when navigating with a link and what I can do to solve this. Any help would be appreciated.
I believe the reason this is happening is that nuxt-link is pushing a new page onto the back stack.
With that in mind, scrollBehaviour is being called with a null savedPosition parameter because this is a brand new page. This is analogous to calling router.push() when doing programmatic navigation.
I wasn't able to find any method of emulating the back button behaviour strictly using nuxt-link, but it's simple to implement using programmatic navigation:
// go backward one page
router.go(-1)
This is a conceptional question, in this case a component is a screen, if that makes sense
Is there a good solution for fluently preloading a component? What I mean by that is perhaps calling a portion of a component, before opening up the view
an example of this is say, snapchat stories, when greyed out on press will simply load. The second press then opens up the view. Essentially allows you to preload before then navigation to the view
Is this a Redux task? Does anyone have an example?
Seems like some concepts are mangled in your mind. What you are trying to achieve is not to preload components, rather run logic before drawing anything on the screen OR preloading some media. Therefore, what you need to do is not to preload anything, but to seperate your logic from your view (let's say video data from showing video itself), retrieve / prepare data (download video for example) and after it is ready show your component.
Also, if what you are trying to preload is just media, you should checkout react-preload.
Let's say I have an app built like the Microsoft weather app.
On launch of app I need to download the forecast from the internet. While waiting to do so I also need to display a progress indicator. Which of the following (if any) is recommended?
Render the page fully with navigation controls (hamburger side menu) as well as page content (but without values since they are data bound). Then overlay a modal control like a popup with a progress indicator inside and a cancel button.
Render only the application root shell with the progress indicator inside (no other content, or navigation controls like hamburger menu are visible). Then once the task is complete, navigate to the home page with content.
Render the home page with content and navigation controls, but hide only the content (with visibility = collapsed) and show a progress indicator in its place. Once data is downloaded hide the progress indicator, and show the content.
I don't know which one of these I'm supposed to use. Is there a recommended way to do this?
Or is there a better way I didn't think of?
There is no one perfect answer for this question but I will try to explain the most common solution. None of points above is good or bad. It is better to concentrate on the user experience.
Render fully page with navigation controls and display loading popup is not really bad idea - user see the whole page with progress ring for instance and has chance to cancel it. But remmber that if data is not loaded or user abort pulling it there will be empty content in the app (if this is first time when user launched the app).
One of the best solutions for scenario you wrote is to use extended Splash Screen. Once you app is launched first Splash Screen is displayed and when you extend it, you can add progress ring to indicate that data is being retrieved.
This is very elegant way to present to the user.
Please see below guidline how to do it:
UWP Extended splash screen
I am developing a windows 8 app using JavaScript & HTML.
I have a page which has different sections laid horizontally. I have links for these sections in another page. I want the page to load from that specific section (meaning page should start from this section).
I am using a grid template and have a listview in the main page. When i click on any item in a group ,navigate to that page and come back to the main page. I want the main screen to load from the section that i have selected before.The screen should automatically scroll to that section like how it is happening from semantic zoom.
Any help in this regard will be of great use.
Thanks
For the first part, it should be enough to set the scrollLeft property of the container to the offsetLeft property of the element you want to scroll to.
The second part can be achieved by storing the scrollPosition attribute of the ListView before navigating away and setting it to its old value after navigating back.
As Ma_li said, scroll-left is one solution -- especially for non ListView content. The key here is how much of the experience you want to maintain when navigating back. One option (again, for non-listview content) is to find the element you want to be onscreen, and calling scrollIntoView on the element. However, this only brings the item on screen -- it won't bring it all the way to the left (or right, for BIDI languages), it scrolls just enough to et the whole element on screen.
For ListViews, you should use the indexOfFirstVisibleItem (or, indexOfLastVisibleItem) to scroll the listview to the correct location. This is key, because the listview is a virtualized control, this provides the most accurate & reliable method for scrolling the listview position.
Thanks Dominic & ma_il
I tried document.getElementBy("Id").focus() for the 1st Question and it worked. But i am getting a problem in this.
I have four divs Horizontally say "divA divB divC divD"
Data for the divA is coming from cloud. When i click on the link for divD in the main screen. it is not taking me to the corresponding section for the first time as it takes some time to load the divA. when click on the link for divD second time, it takes to the respective section. It is working if i use setInterval() but the DivA is shown for few seconds when the page loads and then scrolls to divD which is not good.