实用的滚动

zzir 发布于2019-08-21 16:27 / 3291人阅读

摘要：滚动行为用户良好的交互体验功能使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。具体方法实例期望滚动到哪个的位置要去的路由离开的路由对象当且仅当导航通过浏览器的前进后退按钮触发时才可用。

滚动行为

==用户良好的交互体验==

功能使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

注意事项
这个功能只在 HTML5 history 模式下可用。

具体方法实例

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

to要去的路由
from 离开的路由对象
savedPosition 当且仅当 popstate 导航 (通过浏览器的前进/后退按钮触发) 时才可用。

滚动行为传递的值

即return后面的值的类型

{ x: number, y: number }
{ selector: string }

string 为to.hash值带#的

附上小案例
https://hxj886600.github.io/v...

服务器托管云服务器实用的语言编程超实用的代码段小程序的实用方法实用的小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88567.html

实用的滚动

摘要：滚动行为用户良好的交互体验功能使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。具体方法实例期望滚动到哪个的位置要去的路由离开的路由对象当且仅当导航通过浏览器的前进后退按钮触发时才可用。滚动行为 ==用户良好的交互体验== 功能使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vu...

RichardXG 2019-08-01 17:36 评论0 收藏0
前端实用知识

摘要：开发中的实践尽量使用更换实现样式变化。原因事件存在毫秒延时。解决方法移动端使用事件。文本显示省略号显示省略号的基本条件元素定长。单行显示省略号多行显示省略号目前只有内核支持此属性和手机端内核以及浏览器默认字体浏览器默认字体是。 1、输入URL到显示网页，中间发生了什么 DNS(完成域名到IP的映射)-->TCP传输(三次握手建立传输链接)-->发送请求(分析url，设置请求头、主体)-...

luckyw 2019-08-30 15:55 评论0 收藏0
前端实用知识

摘要：开发中的实践尽量使用更换实现样式变化。原因事件存在毫秒延时。解决方法移动端使用事件。文本显示省略号显示省略号的基本条件元素定长。单行显示省略号多行显示省略号目前只有内核支持此属性和手机端内核以及浏览器默认字体浏览器默认字体是。 1、输入URL到显示网页，中间发生了什么 DNS(完成域名到IP的映射)-->TCP传输(三次握手建立传输链接)-->发送请求(分析url，设置请求头、主体)-...

CoyPan 2019-08-23 15:14 评论0 收藏0
前端实用知识

摘要：开发中的实践尽量使用更换实现样式变化。原因事件存在毫秒延时。解决方法移动端使用事件。文本显示省略号显示省略号的基本条件元素定长。单行显示省略号多行显示省略号目前只有内核支持此属性和手机端内核以及浏览器默认字体浏览器默认字体是。 1、输入URL到显示网页，中间发生了什么 DNS(完成域名到IP的映射)-->TCP传输(三次握手建立传输链接)-->发送请求(分析url，设置请求头、主体)-...

bovenson 2019-08-02 14:15 评论0 收藏0