In the vue3 project, when I jump to the page, the height of the elements in the jump page from the top cannot be calculated correctly - installation

In the vue3 project, when I jump from one page (home page) to another page (details page), the height of the elements in the details page from the top cannot be calculated correctly, but when I refresh the details page, it can Calculated correctly, how to solve this problem?
Explanation: I am executing this method in setup syntactic sugar。
I tried adding scrollBehavior attribute to router
Although the page after the jump can be placed at the top, the height of the elements inside is not correct from the top

Related

scrollIntoView angular application

I am working on an Angular single page application. I have a navbar. I am using fragments to jump to section and anchorScrolling is enabled.
How should I scroll to a specific section when refreshing the page and when the URL contains the hash fragments? xx/#sectionToJUmp.
I have tried scrollIntoView, in the ngAfterViewINit(), but it's not working. The specific section is in a position, but it goes down when other sections are loaded. The scroll remains in the before position. How to get it in the specific section position? Thank you

Xamarin Forms: Values vanished/refreshed on swiping more than four content pages inside carousel page or tabbed page

I am working on a xamarin forms project which have a carousel page container, and content pages as its children are created dynamically on different condition checks. (Minimum 8 children in my case)
Let's take the mentioned minimum case. I enter some values in entry/picker controls in the 1st child and then navigate/swipe pages till 5th child. When I came back to the first child page, the values I entered/selected are now vanished/refreshed.
I have noticed that carousel page saves only 3 pages data in it. i.e. (Left Page, Current Page and the Right Page).
And Tabbed page saves 4 pages data.
I want the values to stay in the child page where I entered whether I navigate to the last most page or in the middle and navigate back to that page.
I have googled via the letters as "Carousel page/ Tabbed page Saved states" etc. but unable to find something useful.
So, I need to know the property name/ method name etc. by which xamarin forms setting the limit of carousel page as 3 and tabbed page as 4.
Waiting for your response.
Thanks.
OK I found that I was using a Custom Picker Control and the value refreshing issue is with it. I just forget to set the selectedIndex of the picker on OnElementChanged event.

navigate back and display the previous page without reloading the previous page variables and designs?

I have one issue in my program, i have three pages in my program, Main page, first page and second page. I'm able to navigate from the main page to the first page and from the first page to the second page. I have a stack panel in the first page. It consists of children which are dynamically created from the db. This page contains a OnNavigateTo method, for bringing the elements from the main page and displaying it, And i wrote my codings in this method to add dynamically children to the stackpanel. when navigating back from the second page to the first page, the compiler will goes to the OnNavigateTo method and regenerate the children of the stackpanel once again.
My problem is:
i want to show the previously displayed first page with all the data, when the back button is pressed. I doesn't want the page to regenerate again. I want the static page which i have previously when i go back from the second page to the first page.
How to do it? please help me with some piece of code... Thank You..
Do the logic in the constructor, because it doesn't get called when navigating back (unless the app has been tombstoned). OnNavigatedTo gets called every time no matter how you navigate to the page.
Read this for more info:
WP7 Development Tip of the Day: Page Startup: The Constructor

Interactive elements of a web page

I was wondering if we have to consider interactive elements of a web page which are basically changing a section of a web page as a new level when making a site map. For example, I have a web page "x" with edit, new, delete function button. Clicking on these buttons changes only a specific part of the page which is associated which is a constant area in itself. The parts of the web pages which don't change are the top navigation, footer etc. While thinking of a site map I wasn't sure if clicking on features like edit would be considered a new level since the web page is the same.
No, interactive page elements would not be considered part of a site map.
The page they reside on would be placed on the site map, but that is it.
A site map is meant to record the hierarchy and individual pages of a site... the things a person can navigate to.
Interactive elements would not fit this unless there are several different bits on one page and those bits can be reached by anchors.

Split page scrolling behaviour in HTML

So I have a page that is split into 2 columns. The left column there are expandable forms that are quite long to ask the user optional product preferences. On the right side of the page there is a much shorter, 'contact details' form.
The contact details form is mandatory while all the left product preferences forms are optional. The behaviour idea is that as the user scrolls down to complete the left column optional forms, the page will only scroll the left column - the contact details forms displayed in the right column stay in place beginning. I'm having trouble implementing this and I haven't found a solution yet or any examples of pages with this split column behaviour online.
Any advice / suggestions?
Thanks!
Depending on how involved your layout is, you can use css fixed positioning so that as the page scrolls down, your right column stays in the same place.
Sample.
You can put the contents of the longer (left) column in a container div, and make that div independently scrollable using the overflow attribute.
Here's a sample.

Resources