ホームページ > ウェブフロントエンド > jsチュートリアル > vue2.0でシミュレートされたアンカーポイントの例

vue2.0でシミュレートされたアンカーポイントの例

亚连
リリース: 2018-05-30 13:53:06
オリジナル
1676 人が閲覧しました

ここで、vue2.0 シミュレーションのアンカー ポイントの例を共有します。これは、良い参考値であり、皆さんの役に立つことを願っています。

vueプロジェクトではルーティングジャンプを使用するため、IDのアンカー機能で通常のaタグを使用することができなくなります。

解決策:

<a href="javascript:void(0)" rel="external nofollow" @click="goAnchor(&#39;#anchor&#39;)"> 灰啊灰啊我的骄傲放纵</a>
ログイン後にコピー

methods: {
 goAnchor(selector) {
  var anchor = this.$el.querySelector(selector)
  document.body.scrollTop = anchor.offsetTop
 }
}
ログイン後にコピー

17. 9. 20 更新: 上記には FireFox のバグがあります。修正は次のとおりです。

methods: {
 goAnchor(selector) {
  var anchor = this.$el.querySelector(selector)
  document.body.scrollTop = anchor.offsetTop; // chrome
  document.documentElement.scrollTop = anchor.offsetTop; // firefox
 }
}
ログイン後にコピー

以上、皆さんのためにまとめてみましたので、今後皆さんのお役に立てれば幸いです。

関連記事:

Vue はミックスインを使用して圧縮画像コードを実装します

vue プロジェクトの国際化 vue-i18n のインストールと使用チュートリアル

Vue2.0 イベントのブロードキャストと受信 (オブザーバー モード)

以上がvue2.0でシミュレートされたアンカーポイントの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート