VUE框架:vue2转vue3全面细节总结(4)滚动行为

VUE框架:vue2转vue3全面细节总结(4)滚动行为_第1张图片

大家好,我是csdn的博主:lqj_本人

这是我的个人博客主页:

lqj_本人_python人工智能视觉(opencv)从入门到实战,前端,微信小程序-CSDN博客

最新的uniapp毕业设计专栏也放在下方了:

https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482

平时我也会在哔哩哔哩视频中讲解一些大家平时用得到的东西,

哔哩哔哩欢迎关注:

卢淼儿的个人空间-卢淼儿个人主页-哔哩哔哩视频

滚动行为 

我们可以通过 vue-router 自定义路由切换时页面如何滚动。比如,当跳转到新路由时,页面滚动到某个位置;切换路由时页面回到之前的滚动位置。

当创建路由实例时,我们只需要提供一个 scrollBehavior 方法:

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

scrollBehavior 函数接收 to from 路由对象。第三个参数 savedPosition,只有当这是一个 popstate 导航时才可用(点击浏览器的后退/前进按钮,或者调用 router.go() 方法)。

滚动到固定距离

该函数可以返回一个 ScrollToOptions 位置对象:

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // 始终滚动到顶部
    return { top: 0 }
  },
})

滚动到元素位置

也可以通过 el 传递一个 CSS 选择器或一个 DOM 元素。在这种情况下,topleft 将被视为该元素的相对偏移量。

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // 始终在元素 #main 上方滚动 10px
    return {
      // 也可以这么写
      // el: document.getElementById('main'),
      el: '#main',
      top: -10,
    }
  },
})

滚动到锚点位置

还可以模拟 “滚动到锚点” :

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        el: to.hash,
      }
    }
  },
})

滚动到之前的位置

返回 savedPosition,在按下浏览器 后退/前进 按钮,或者调用 router.go() 方法时,页面会回到之前的滚动位置:

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
})

提示:如果返回一个 falsy 的值,或者是一个空对象,则不会发生滚动。我们还可以在返回的对象中添加 behavior: 'smooth' ,让滚动更加丝滑。

延迟滚动

有时候,我们不希望立即执行滚动行为。例如,当页面做了过渡动效,我们希望过渡结束后再执行滚动。要做到这一点,我们可以返回一个 Promise :

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ left: 0, top: 0 })
      }, 500)
    })
  }
})

你可能感兴趣的:(vue,vue.js,javascript,前端)