vue滚动行为实例分析
本文主要和大家介绍vue滚动行为,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。
滚动行为
什么是路由的滚动行为
当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样
注意: 这个功能只在 HTML5 history 模式下可用。在这个模式下我们需要启动一个服务
我们用scrollBehavior 方法来做路由滚动
scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用
下面我们做一个小案例来了解一下
效果
<p id="app"> <h1>滚动行为</h1> <ul> <li><router-link to="/">首页</router-link></li> <li><router-link to="/foo">导航</router-link></li> <li><router-link to="/bar">关于</router-link></li> <li><router-link to="/bar#an1">红色页面</router-link></li> <li><router-link to="/bar#an2">蓝色页面</router-link></li> </ul> <router-view></router-view> </p> <script> var Home = { template:"<p>home</p>" } var Foo = { template:"<p>foo</p>" } var Bar = { template: ` <p> bar <p style="height:500px;background: yellow;"></p> <p id="an1" style="height:500px;background: red;">红色页面</p> <p id="an2" style="height:300px;background: blue;">蓝色页面</p> </p> ` } var router = new VueRouter({ mode:"history", //控制滚动位置 scrollBehavior (to, from, savedPosition) { //判断如果滚动条的位置存在直接返回到当前位置,否者返回到起点 if (savedPosition) { return savedPosition } else { if (to.hash) { return {selector: to.hash} } } }, routes:[ { path:"/",component:Home }, { path:"/foo",component:Foo }, { path:"/bar",component:Bar } ] }); var vm = new Vue({ el:"#app", router }); </script>
vue滚动小案例
相关推荐:
Atas ialah kandungan terperinci vue滚动行为实例分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Bagaimana untuk melaksanakan fungsi menatal ke kedudukan elemen tertentu dalam JavaScript? Dalam halaman web, apabila kita perlu menumpukan perhatian pengguna kepada kedudukan elemen tertentu, kita boleh menggunakan JavaScript untuk melaksanakan fungsi menatal ke kedudukan elemen yang ditentukan. Artikel ini akan memperkenalkan cara melaksanakan fungsi ini melalui JavaScript dan memberikan contoh kod yang sepadan. Pertama, kita perlu mendapatkan maklumat kedudukan elemen sasaran. Anda boleh menggunakan Element.getBoundingClient

HTML, CSS dan jQuery: Buat papan buletin menatal secara automatik Dalam reka bentuk web moden, papan buletin sering digunakan untuk menyampaikan maklumat penting dan menarik perhatian pengguna. Papan buletin tatal automatik digunakan secara meluas pada halaman web Ia membolehkan kandungan buletin menatal dan memaparkan pada halaman dalam bentuk animasi, meningkatkan kesan paparan maklumat dan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk membuat papan buletin tatal automatik dan memberikan contoh kod khusus. Pertama, kita memerlukan HT

Cara memantau penatalan iframe memerlukan contoh kod khusus Apabila kami menggunakan teg iframe untuk membenamkan halaman web lain dalam halaman web, kadangkala kami perlu melakukan beberapa operasi khusus pada kandungan dalam iframe. Salah satu keperluan biasa ialah mendengar acara tatal iframe supaya kod yang sepadan boleh dilaksanakan apabila tatal berlaku. Berikut akan memperkenalkan cara menggunakan JavaScript untuk memantau penatalan iframe, dan menyediakan contoh kod khusus untuk rujukan. Dapatkan elemen iframe Pertama, kita perlukan

Bagaimana untuk mencapai kesan tatal skrin penuh dalam Vue Dalam reka bentuk web, kesan tatal skrin penuh boleh membawa pengguna pengalaman menyemak imbas yang sangat unik dan lancar. Artikel ini akan memperkenalkan cara untuk mencapai kesan tatal skrin penuh dalam Vue.js, serta contoh kod khusus. Untuk mencapai kesan tatal skrin penuh, kita perlu menggunakan rangka kerja Vue.js untuk membina projek. Dalam Vue.js, kita boleh menggunakan vue-cli untuk membina rangka projek dengan cepat. Kemudian kita perlu memperkenalkan beberapa perpustakaan pihak ketiga untuk mencapai kesan penatalan, seperti halaman penuh

Bagaimanakah JavaScript mencapai kesan tatal tak terhingga untuk memuatkan secara automatik apabila menatal ke bahagian bawah halaman? Kesan tatal tak terhingga ialah salah satu ciri biasa dalam pembangunan web moden Ia boleh memuatkan lebih banyak kandungan secara automatik apabila menatal ke bahagian bawah halaman, membolehkan pengguna mendapatkan lebih banyak data atau sumber tanpa mengklik butang atau pautan secara manual. Dalam artikel ini, kami akan meneroka cara menggunakan JavaScript untuk mencapai fungsi ini dan menyediakan contoh kod khusus. Untuk mencapai kesan tatal tak terhingga memuatkan secara automatik apabila menatal ke bahagian bawah halaman, ia terbahagi terutamanya kepada yang berikut

Bagaimana untuk mencapai kesan pensuisan tatal imej dengan JavaScript? Dalam reka bentuk web moden, kesan pensuisan tatal imej ialah salah satu elemen reka bentuk yang biasa digunakan, yang boleh menambah dinamik dan kejelasan pada halaman web. JavaScript, sebagai bahasa skrip yang biasa digunakan, boleh membantu kami mencapai kesan ini. Dalam artikel ini, saya akan memperkenalkan kaedah untuk menggunakan JavaScript untuk mencapai kesan pensuisan tatal imej, dan memberikan contoh kod yang sepadan. Pertama, kita perlu menyediakan struktur HTML untuk memaparkan imej. generasi tertentu

Bagaimanakah JavaScript melaksanakan fungsi memuatkan lebih banyak kandungan secara automatik apabila menatal ke bahagian bawah halaman web? Gambaran Keseluruhan: Penatalan tanpa had ialah ciri biasa dalam aplikasi internet moden. Apabila pengguna menatal ke bahagian bawah halaman web, lebih banyak kandungan dimuatkan secara automatik, memberikan pengalaman pengguna yang lebih baik. JavaScript boleh membantu kami mencapai fungsi ini. Artikel ini akan memperkenalkan contoh kod khusus tentang cara menggunakan JavaScript untuk mendengar acara tatal pengguna dan memuatkan lebih banyak kandungan berdasarkan kedudukan tatal. Pelaksanaan khusus: Pertama, dalam HTM

Cara menggunakan CSS untuk melaksanakan tatal lancar ke butang bawah Dalam reka bentuk web, untuk meningkatkan pengalaman pengguna, kita selalunya perlu menambah beberapa fungsi yang mudah, seperti butang untuk kembali ke bahagian atas halaman atau tatal ke bawah. Artikel ini akan memperkenalkan secara terperinci cara menggunakan CSS untuk melaksanakan tatal lancar ke butang bawah dan memberikan contoh kod khusus. Pertama, kita perlu menambah elemen butang pada HTML untuk mencetuskan fungsi tatal ke bawah. Anda boleh menggunakan teg atau teg <butang>, bergantung pada keperluan reka bentuk anda. wujud
