How to implement the mobile Scroll scroll in VUE

This article shared everyone about how to implement the Scroll scrolling of the mobile terminal in VUE. Xiaobian feels quite practical, so share it with you to do a reference. Let’s take a look at Xiaobian.

  NPM INSTALL BETTER-SCROLL --SAVE  

Second, and quote

   

Template points to the reference point to scrolling DOM element

According to the official document REF attribute, we can reference the DOM element to

vue中怎么实现移动端的scroll滚动

vue中怎么实现移动端的scroll滚动

III, registering in Methods _initscroll method, this method is instantiated to better-scroll, and this method will be executed after the page DOM structure is rendered

   Methods: {_initscroll () {this.menuscroll = new bscroll (this. $ refs.Menuwrapper, {}) this.foodsscroll = new bscroll (this. $ refs.foodswrapper, {})}}} 

In the created () method, the back-end data acquisition is successful after successful callback, call _initscroll ();

Vue update data is asynchronous, Therefore, BScroll cannot obtain the height of the target content before the data is not loaded, so it will result in a phenomenon that cannot be scrolled

Here, it must be noted that after the data acquisition is successful, direct DOM does not necessarily be rendered after data acquisition, so use this.nexttick () method, use _initscroll () in this.nextTick’s callback;

Take a look at the official about this. $ Nexttick ()

vue中怎么实现移动端的scroll滚动 So we should write this in the project:

vue中怎么实现移动端的scroll滚动 Thank you for reading! About how to implement the mobile Scroll scroll in Vue, share it here, I hope that the above can help everyone, so that everyone can learn more. If you feel that the article is good, you can share it out to let more people see it!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment