vue 组件的 scrollBehavior-滚动行为
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router
能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
注意: 这个功能只在支持 history.pushState
的浏览器中可用。
在文档页面(http://localhost:8080/document)拉动滚动条,然后刷新浏览器会发现滚动条依然在原来的位置,这是浏览器的默认行为,会记录浏览器滚动条默认位置。
但是点击浏览器“前进/后退”按钮,会发现当初那个页面的滚动条从0开始了,没有记录上一次滚动条的位置。现在要求点击浏览器“前进/后退”按钮,页面滚动条要记录上一次的位置,这时需要设置它的的滚动行为。
这时候需要在路由配置中设置 scrollBehavior(to,from,savePosition)函数,函数有三个参数。scrollBehavior() 函数在点击浏览器的“前进/后退”,或者切换导航的时候触发。
使用方法:
const router = new VueRouter({routes: [...],scrollBehavior (to, from, savedPosition) {// return 期望滚动到哪个的位置}
})
scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。
console.log(to) // to:要进入的目标路由对象,到哪里去
console.log(from) // from:离开的路由对象,哪里来
console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}
}
index.js
import Vue from 'vue'
import Router from 'vue-router'
import { scrollBehavior } from './utils'
Vue.use(Router)
const router = new Router({mode: 'history',scrollBehavior,routes: [...routesPC,...routesMO]
})
export default router
scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
在该方法内,可以通过判断路由to,from两个对象来做一些必要的判断;
savedPosition 参数是记录的上次滚动的位置;
通过return {x:number,y:number}来控制页面滚动的位置;
对于所有路由导航,简单地让页面滚动到顶部。
scrollBehavior (to, from, savedPosition) {return { x: 0, y: 0 }
}
想要在后退时,滚动到上次滚动的位置,如果满足条件,savedPosition有值的情况下:
scrollBehavior (to, from, savedPosition) {if (savedPosition) {return savedPosition} else {return { x: 0, y: 0 }}
}
新增情况:异步滚动
当页面数据需要请求加载有延迟的情况下,页面如果直接滚动,会出现滚动后,页面数据请求回来,DOM重新渲染,滚动失效的情况;
所以官方文档给补充了异步滚动的方法:
scrollBehavior (to, from, savedPosition) {return new Promise((resolve, reject) => {setTimeout(() => {resolve({ x: 0, y: 0 })}, 500)})
}
这个会在返回后,有一定延迟再滚动,可以根据自己项目的具体情况进行一定修改,兼容;
注:我的项目mobile端数据加载使用的是vue-mugen-scroll滑动加载数据组件,网上没找到能触发它加载的方法,所以,在返回列表页后,数据刷新,只有一页数据,滚动到底,也找不到上次的数据,所以还是没有解决我的问题,但是这个方法是很好的,只是使用情况,会有限制,记录一下,以备后用。
vue 组件的 scrollBehavior-滚动行为相关推荐
- Vue组件实现数字滚动抽奖效果
以下我是根据该作者做的一点点得修改 https://www.jb51.net/article/240059.htm <template><div class="info-s ...
- vue 横向菜单滚动定位_使用vue组件+iscroll实现一个横向菜单,不能正确滑动
使用vue组件+iscroll实现一个横向菜单,可是却不能滑动,给父元素ul写死一个宽度可以滑动. 但是,我在computed里计算宽度,直接路由进去不能滑动,当我进入别的组件(切换路由)回来又可以滑 ...
- 10 分钟上手 Vue 组件 Vue-Draggable
Vue 综合了 Angualr 和 React 的优点,因其易上手,轻量级,受到了广泛应用.成为了是时下火热的前端框架,吸引着越来越多的前端开发者! 本文将通过一个最简单的拖拽例子带领大家快速上手 V ...
- Antd Vue 组件库之Table表单
Antd Vue 组件库之Table表单 Table 表格 展示行列数据. 何时使用 当有大量结构化的数据需要展现时: 当需要对数据进行排序.搜索.分页.自定义操作等复杂行为时. 如何使用 指定表格的 ...
- GitChat · 前端 | Vue 组件库实践和设计
来自 GitChat 作者:周志祥 更多IT技术分享,尽在微信公众号:GitChat技术杂谈 前言 现在前端的快速发展,已经让组件这个模式变的格外重要.对于市面上的组件库,虽然能满足大部分的项目,但是 ...
- 少女风vue组件库制作全攻略~~
预览 组件库官网 github地址 如果喜欢各位小哥哥小姐姐给个小星星鼓励一下哈, 请勿在生产环境中使用,供学习&交流~~ 完整项目目录结构 git clone到本地安装依赖后,执行npm r ...
- vue学习-v-if v-for优先级、data、key、diff算法、vue组件化、vue设计原则、组件模板只有一个根元素、MVC.MVP,MVVM
1:v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能? //在vue页面中 同时使用v-for与v-if后,打印渲染函数. console.log(app.$optio ...
- 好用的vue组件插件及框架
实用的vue插件大汇总 Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总 ...
- vue组件库大全(忘了的时候可以进来找一下~)
基于Vue的组件库 https://github.com/ElemeFE/element" element 饿了么出品的Vue2的web UI工具套件 https://github.com/ ...
- Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多 一.ScrollView 上拉加载更多 二.使用案例 三.API 使用指南 四.源代码 一.ScrollView 上拉加载更多 组件说明: 实现 ...
最新文章
- 大厂面试喜欢考算法,该怎么破?
- python代码写龙卷风_python面试题
- python下载安装教程3.8.0-windows中安装Python3.8.0的实现方法
- oracle 查询每组条数,Oracle SQL查询:根据时间检索每组的最新值
- leetcode 刷题142 143
- Phonegap 极光推送api 服务器端推送代码
- Github管理Eclipse分布式项目
- Important table for Fiori launchpad Designer and configuration
- c语言实现快速排序对文件中字符,C语言中快速排序和插入排序优化的实现
- SpringBoot中Bean按条件装配
- (王道408考研操作系统)第二章进程管理-第一节2:进程状态及其切换
- oracle一体机flash卡,PCIe Flash卡设备的测试
- 培训工资我看大学培训机构--大学生到底要不要参加培训机构 一个参加培训的大学生的真实感受...
- mysql第五章项目二_高性能MySQL笔记 第5章 创建高性能的索引
- Python案例:四种方式编程求解一元二次方程
- 深入系统底层trace
- 网易云音乐歌词下载 C#
- 从 Java 到 Kotlin,再从 Kotlin 回归 Java
- Windows 10注册表损坏该如何修复?
- 十年互联网 十个风云人物
热门文章
- 话筒好坏测试软件,怎样测试麦克风好坏,测试麦克风是否正常
- 期货止损的必要性(为什么期货止损不一定会触发)
- java val变量声明_Kotlin 中 var 与 val 定义变量的区别,及使用场景
- 易康(ESP2插件)运行时出现的问题解决办法
- 中学计算机课使用登记册,中学信息技术听课记录.doc
- 第二周c++总结:)
- Springcloud config client中@Value读取不到值的问题
- 安装项目依赖包---基于Ant-Design-Pro-2-0-的CMS管理后台入门系列
- 瑞典品牌Happy Plugs推出专为3至15岁少年设计的新耳机
- window10安装office之后开始菜单不显示office快捷方式图标