vue router滚动行为scrollBehavior
时间:2021-08-06
本文章向大家介绍vue router滚动行为scrollBehavior,主要包括vue router滚动行为scrollBehavior使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
views/cityDetail.vue:
<template> <div class="city-detail">{{$route.params.id}}</div> </template> <style> .city-detail{ height: 1500px; line-height: 500px; background-color: greenyellow; font-size: 100px; text-align: center; } </style>
App.vue:
<template> <div id="app"> <div class="sticky-header">头部导航栏(粘性布局)</div> <div class="box">vue router中的滚动行为</div> <div class="hot-cities"> <h1>热门城市</h1> <div class="nav" id='nav'> <!-- <router-link tag='div' class="nav-link" active-class="active" :to="{path:'/cityDetail/1',hash:'#nav'}">城市1</router-link> <router-link tag='div' class="nav-link" active-class="active" :to="{path:'/cityDetail/2',hash:'#nav'}">城市2</router-link> <router-link tag='div' class="nav-link" active-class="active" :to="{path:'/cityDetail/3',hash:'#nav'}">城市3</router-link> --> <div v-for="(item,index) in cityList" :key="index" :class="['nav-link',{active:currentIndex===index}]" @click="handlePush(index)">{{item}}</div> </div> </div> <router-view></router-view> </div> </template> <script> export default { data() { return { cityList: ['城市1', '城市2', '城市3'], currentIndex: 0 } }, methods: { handlePush(index) { this.currentIndex = index this.$router.push({ path: '/cityDetail/' + (index + 1), hash: '#nav' }) } } } </script> <style lang="less" scoped> .sticky-header { position: sticky; top: 0; width: 100%; line-height: 44px; background-color: blue; color: #fff; text-align: center; z-index: 1; } .box { width: 100%; line-height: 700px; background-color: orange; color: #fff; font-size: 100px; text-align: center; } .hot-cities { text-align: center; > h1 { padding: 20px 0; } .nav { display: flex; border-top: 1px solid #000; .nav-link { display: flex; height: 50px; flex: 1 1 33.33%; justify-content: center; align-items: center; } .active { color: greenyellow; background-color: #000; } } } </style>
router/index.js:
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) import CityDetail from '@/views/CityDetail' const routes = [ { path: '/cityDetail/:id', name: 'cityDetail', component: CityDetail } ] const router = new VueRouter({ mode: 'history', routes, scrollBehavior(to, from, savedPosition) { console.log(to, from, savedPosition) if (savedPosition) { return savedPosition // 浏览器上的前进后退按钮记录的位置对象 } else { const position = {} position.selector = to.hash if (to.hash === '#nav') position.offset = { y: 150 } return position } } }) export default router
效果:
当切换tab时自动定位到指定高度
原文地址:https://www.cnblogs.com/wuqilang/p/15110513.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 深入理解JVM(③)Java的锁优化
- 解Bug之路-Nginx 502 Bad Gateway
- bootstrap v4 toast轻提示正确用法
- 精华 | SQL注入万能Bypass技巧
- 【STM32F429开发板用户手册】第31章 STM32F429的SPI总线基础知识和HAL库API
- Linux 查找当前目录下所有包含指定内容的文件
- 父子管道更有效地扩展应用及其存储库结构
- Go语言 | 你还在这样获取文件的大小吗?
- 如何在Gitlab流水线中对部署进行控制?
- 工具的使用 | Hydra暴力破解工具的用法
- “灯下黑”应用在windows隐身后门中的实践
- 渗透测试-信息收集命令总结
- 什么?一个核同时执行两个线程?
- 如何下载网页上的视频?
- c++ int,unsigned int混合表达式类型转换