VUE implementation navigation title bar with the page scrolling

Project development The navigation bar will be more common as the page scroll, which is more common, and a code sharing that implements this feature with VUE.

1. Bind Data Data “OpacityStyle” with V-Bind element style attribute.

 Attractions Details // I simply, actual development is subject to demand  
2. Define opacityStyle in Data, the data content is Opacity transparency attribute, set to 0.

DATA () {RETURN {OpacityStyle: {Opacity: 0}}
   3. Listening to Scroll Event And perform the appropriate method, usually I am used to start listening at the activated life cycle (ActiVated is a lifecycle generated under Keepalive properties, when entering the page). 
ActiVated () {WINDOW.ADDEVENTLISTENER (‘scroll’, this.handlescroll)}

 4. Design Handlescroll () method. The specified value calculates the Opacity property by getting the scroll scrolling offset value, and the Opacity property is calculated and the transparency linkage changes.   
Methods: {handlescroll () {const top = document.documentelement.scrolltop // Get scroll offset value IF (TOP> 45 && TOP

5. Subscribe to Scroll listening. Just performing monitors in activated (), the same we are removed in deActivated (). This step is important, and many people will ignore, if they do not mean the scroll behavior that will affect other pages, the project generates bugs.
  deActivated () {WINDOW.RemoveEventListener ('scroll ", this.handlescroll)} <= 150){ //实际按需求取范围
  const opacity = top / 150 //对opacity作计算,透明度从起始到1随偏移值而改变
  this.opacityStyle = {opacity} //实时返回给opacityStyle

The above is Vue Implement the page scrolling microscope navigation bar function code and logic, there is a place where you don’t understand, such as Keepalive usage, etc. You can view the document to learn from

   This article on the VUE implementation navigation title bar will introduce this, more related VUE navigation title columns, scroll, invoice, please search for Tumi clouds or continue to browse the following The article hopes to support Tumi clouds in the future! 
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment