Vue führt JQuery ein, um eine reibungslose Bewegung zu erreichen

Dieses Mal werde ich Ihnen zeigen, wie Vue JQuery einführt, um eine reibungslose Bewegung zu erreichen. Das Folgende ist ein praktischer Fall. In der Vergangenheit wurde die animierte Implementierung von jquery bevorzugt, aber in Vue gibt es keine solche Methode. So erreichen Sie ein reibungsloses Scrollen zur angegebenen Position durch Klicken auf

Navigation

im Vue-Projekt. Ich habe lange online nachgesehen und festgestellt, dass es keine wirkliche Lösung gibt. Ich habe zuvor auf die Idee eines Bloggers verwiesen: Durch regelmäßiges Scrollen innerhalb eines bestimmten Zeitraums kann der Effekt des reibungslosen Scrollens nach kontinuierlichem Betrieb mit bloßem Auge gesehen werden (zum Anzeigen klicken). Ich war so aufgeregt, dass ich schnell auf den Code verwiesen und ihn geschrieben habe, aber ich war verwirrt. . . Nachdem ich den Blogger zur Diskussion kontaktiert hatte, kam ich zu dem Schluss, dass meine vue2.4-Version möglicherweise nicht für Timer geeignet ist, und schlug daher vor, die Version herunterzustufen. . . Ich sollte besser weiter recherchieren, wie ich es implementieren kann. Am Ende konnte ich keine gute Methode finden, um diesen Effekt mit ein paar Codes zu erzielen. 1.npm install jquery: npm installjquery--registry=<a href="http://www.php.cn/wiki/373.html" target="_blank">https: //</a>

registry.npm.taobao.org --verbose

npm installjquery--registry=<a href="http://www.php.cn/wiki/373.html" target="_blank">https://</a>registry.npm.taobao.org --verbose 2. Ändern Sie nach erfolgreicher Installation die Webpack-

Konfigurationsdatei

: , wie in gezeigt Die Abbildung unten:build--webpack.base.conf.js

3. Importieren Sie dieses JQuery-Plug-In in das Skript der Vue-Vorlage, und dann können Sie es verwenden. In meinem Projekt sind Navigation und andere Module unterschiedliche Komponenten, und dann verwende ich die Sende- und Empfangsmethode, um den Index zu betreiben (die Sende- und Empfangsmethode wird in meinem vorherigen Blog-Beitrag ausführlich vorgestellt, klicken Sie hier, um die Glättung anzuzeigen). Der Effekt hängt hauptsächlich davon ab, was ich im roten Feld sehe. Andere Codes sind Dinge in meinem Projekt, die nicht berücksichtigt werden müssen:

Ich glaube, Sie beherrschen das Nachdem Sie den Fall in diesem Artikel gelesen haben, lesen Sie bitte weitere php-chinesische Artikel im Internet.

Empfohlene Lektüre:

JS Promise-Fallcodeanalyse

Detaillierte Erläuterung der asynchronen Programmierimplementierung Node Async/Await

Das obige ist der detaillierte Inhalt vonVue führt JQuery ein, um eine reibungslose Bewegung zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!