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

An implementation method and anchor point technology, applied in the field of web pages, can solve problems such as unsupported scrolling events and inappropriateness, and achieve the effects of reducing operation time, facilitating maintenance, and improving operation experience

Inactive Publication Date: 2019-03-22
SICHUAN CHANGHONG ELECTRIC CO LTD
View PDF1 Cites 3 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

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 framewo

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • The implementation method of dynamic anchor point based on vue rolling event
  • The implementation method of dynamic anchor point based on vue rolling event

Examples

Experimental program
Comparison scheme
Effect test

Example Embodiment

[0026] Example:

[0027] The specific implementation and smooth jump of the anchor point:

[0028] Insert a progress bar in the page through the element-ui plug-in, add a class name in its parent component, and then set a function in its child component, calculate the value of offsetTop in the element from the top of the parent element, and assign the value to the progress Bar scrollTop, realize the function of anchor point;

[0029] When the user clicks on the anchor point, the value of scroll and offset is obtained through function calculation in the element subcomponent, and the difference between the two is calculated; if it is positive: divide the difference by the number of times the design needs to move, and use The value of scroll minus the number obtained, set the timer of the browser to an appropriate time, complete all the times in turn, and slide up; if it is negative: divide the difference by the number of times to get the value of scroll and add the value of scr...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

PUM

No PUM Login to view more

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...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

Application Information

Patent Timeline
no application Login to view more
IPC IPC(8): G06F16/958G06F16/955G06F8/38
CPCG06F8/38
Inventor 裴晓格
Owner SICHUAN CHANGHONG ELECTRIC CO LTD
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Try Eureka
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap