Vue introduces jquery to achieve smooth movement

This time I will bring you Vue to introduce jquery to achieve smooth movement, Vue to introduce jquery to achieve smooth movement. What are the precautions? The following is a practical case, let's take a look.

In the past, the animate implementation of jquery was preferred, but there is no such method in Vue. How to implement click

Navigation to smoothly scroll to the specified position in the Vue project. I was about to collapse for this effect. I searched online for a long time and found that there was no real solution to this problem. I referred to a blogger before. The author’s idea: By scrolling in regular steps within a certain period of time, the effect of smooth scrolling can be seen with the naked eye after continuous operation (click to view). When I saw this article, I was so excited that I quickly referenced the code and wrote it in, but I was confused. . . It had no effect at all. After contacting the blogger for discussion, I came to the conclusion that my vue2.4 version may not be friendly to timers, so I suggested that I downgrade the version. In this case. . . I'd better continue to research how to implement it. In the end, I couldn't find any good method. I introduced jquery and used the animate method to achieve this effect with a few codes.

1.npm install jquery:

npm installjquery--registry=https://<a href="//m.sbmmt.com/wiki/373.html" target="_blank">registry.npm.taobao.org --verbose </a>

2. After successful installation, modify the webpack

configuration file: build--webpack.base.conf.js, and modify it as shown below:

3. Import this jquery plug-in in the script of the vue template, and then you can use it. In my project, navigation and other modules are different components, and then I use the method of transmitting and receiving to operate the index (the method of transmitting and receiving is introduced in detail in my previous blog post, click to view). The smoothing effect mainly depends on what I see in the red box. The code is enough, the other codes are things in my project, no need to consider:

I believe you have mastered the method after reading the case in this article. For more exciting things, please pay attention to php Chinese Other related articles online!

Recommended reading:

JS Promise case code analysis

detailed explanation of node Async/Await asynchronous programming implementation

The above is the detailed content of Vue introduces jquery to achieve smooth movement. For more information, please follow other related articles on the PHP Chinese website!