Vueではスムーズな動作を実現するためにjqueryを導入しています

今回は、スムーズな動作を実現するための Vue での jquery の導入について説明します。 注意事項 は次のとおりです。

以前は、jquery のアニメーション実装が好まれていましたが、Vue にはそのような方法はありません。 Vue プロジェクトで指定した位置にスムーズにスクロールするためのクリック ナビゲーション を実装する方法。私は長い間オンラインで検索しましたが、この問題に対する本当の解決策がないことがわかりました。以前のブロガーのアイデア: 一定時間内に一定のステップでスクロールすることで、連続操作後に滑らかなスクロールの効果が目で確認できます (クリックして表示) この記事を見たとき、私はとても興奮しました。すぐにコードを参照して書き込んだのですが、混乱してしまいました。 。 。まったく効果がありませんでした。相談のためにブロガーに連絡した結果、私の vue2.4 バージョンはタイマーに適していない可能性があるという結論に達しました。そのため、この場合はバージョンをダウングレードすることを提案しました。 。 。実装方法を引き続き研究する必要がありますが、最終的に良い方法が見つからず、jqueryを導入し、animateメソッドを使用していくつかのコードでこの効果を実現しました。

1.npm install jquery: npm installjquery--registry=<a href="http://www.php.cn/wiki/373.html" target="_blank">https://<code>npm installjquery--registry=<a href="http://www.php.cn/wiki/373.html" target="_blank">https://</a>registry.npm.taobao.org --verbose

2.安装成功后修改webpack配置文件：build--webpack.base.conf.jsregistry .npm.taabao.org --verbose

2. インストールが成功した後に webpack設定を変更します。ファイル : build--webpack.base.conf.js を以下のように変更します:

3. この jquery プラグインを vue テンプレートのスクリプトにインポートします。使用できます。私のプロジェクトでは、ナビゲーションとその他のモジュールは別のコンポーネントであり、送信と受信のメソッドを使用してインデックスを操作します (送信と受信のメソッドについては、以前のブログ投稿で詳しく紹介しています。スムージングは​​クリックして表示します)。効果は主に赤いボックスに表示されている内容に依存します。コードだけで十分です。他のコードは私のプロジェクトにあるものなので、考慮する必要はありません:

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書:

JS Promise ケースコード分析

ノード Async/Await 非同期プログラミング実装の詳細な説明🎜🎜🎜

以上がVueではスムーズな動作を実現するためにjqueryを導入していますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。