The implementation method of dynamic anchor point based on vue rolling event

Abstract

The invention belongs to the technical field of web pages, and discloses a method for realizing dynamic anchor point based on vue rolling event, which realizes smooth jump of page by using dynamic anchor point in vue through monitoring rolling event. The method comprises the following steps: adding a class name as a hook in the parent component of a vue form, setting a function in the child component of the vue form, and assigning the value of offset to Scroll to realize the function of anchor point; When the user clicks on the anchor point, determining the direction and distance required to slide by comparing offsetTop and scrollTop; setting The distance to be slid is segmented and the movement of each segment by the timer function of window. When you create an instance of vue, setting The scroll function in the mounted phase of the vue lifecycle. When the user slides the scroll bar, triggering the scroll function to calculate the moving distance of the scroll bar. By comparison, thecorresponding active anchor point is confirmed, and the modification of the css style of the anchor point is completed.

Description

technical field [0001] The invention belongs to the technical field of web pages, and in particular relates to a method for realizing a dynamic anchor point based on a Vue scrolling event. Background technique [0002] With the popularization of Internet technology, website browsing has become an indispensable part of users' lives. However, the diversity of website content may cause troubles to users' browsing, and the realization of dynamic anchor points allows users to quickly find their own The required sections of the webpage, with a clear idea of ​​the structure of the website. As a popular front-end development framework, the vue framework adopts a bottom-up incremental development design. During the development process, it only focuses on the view layer, and it is easy to integrate with third-party libraries or existing projects. When combined with modern tool chains and various When used in conjunction with a supporting class library, Vue is also fully capable of dr...

AI Technical Summary

Problems solved by technology

[0003] At present, the implementation of anchor points in website development is mainly to obtain the id or class of the jump part and then directly complete the jump through the link in html or use jquery to realize the jump. The method used is more traditional; and in the latest vue framework Among them, jquery's animate() method does not support and the unique way of monitoring scrolling events makes these methods unsuitable. Therefore, this application is mainly aimed at the vue framework, and completes dynamic anchor points by monitoring vue scrolling events. realization of

Images