vue实战之让界面滚动到顶部

作者: 锋叔 | 来源:发表于2019-06-11 18:36 被阅读0次

vue实战之让界面滚动到顶部
vue下返回顶部功能实现
Vue与小程序的返回顶部记录
router(守卫：跳转之前router.beforeEach;
vue实战（11）：开发店铺详情（二）
小程序滚动吸顶，粘性布局
SwiftUI 常用组件之可刷新滚动视图View
SwiftUI Scrollview 如何随意滚动到某个位置顶
Axure教程：上下滚动效果制作步骤详解
vue （记录遇到的问题）

image.png

新增一个tab时界面滚动到头部

研究过window.scrollTo(0, 0) 无效
研究过定义锚点用a标签跳转，出现了改变路由的情况，pass

最终方案使用 scrollIntoView()

第一步：在你头部找一个标签命名一个id，类似一个锚点，我在卡片自定义标题上定义的。

<div slot="header" class="clearfix" id="top">
  <span class="title">{{title}}</span>
</div>

第二步：写一个方法（上面命名的锚点id是啥，就找啥）

top() {
  document.querySelector('#top').scrollIntoView(true)
}

第三步：使用

addTab() {
 this.top()
}

我点击新增明细时调用了一下证明方法确实可行。

image.png

如果谁觉得不但要知其然还要知其所以然，请自行百度或谷歌scrollIntoView()的用法和详解。

vue实战之让界面滚动到顶部
新增一个tab时界面滚动到头部研究过window.scrollTo(0, 0) 无效研究过定义锚点用a标签跳转...
vue下返回顶部功能实现
vue下返回顶部功能实现 Vue中点击按钮回到顶部（滚动效果） vue中回到顶部 vue滚动到一定位置显示置顶元素...
Vue与小程序的返回顶部记录
默认返回顶部按钮是隐藏，滚动一段距离后才显示 VUE 返回顶部小程序返回顶部
router(守卫：跳转之前router.beforeEach;
作用：跳转前进行判断拦截。 vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
vue实战（11）：开发店铺详情（二）
懒癌发作……本篇有关于列表滚动的内容，有点复杂，好好分析 0. 其它 vue实战（1）：准备与资料整理vue实战（...
小程序滚动吸顶，粘性布局
当指定容器滚动到顶部时，让他粘在顶部，离开时跟随页面滚动（不使用页面滚动事件） 1、准备工作 WXML WXSS ...
SwiftUI 常用组件之可刷新滚动视图View
实战需求 SwiftUI 常用组件之可刷新滚动视图View 本文价值与收获看完本文后，您将能够作出下面的界面 ...
SwiftUI Scrollview 如何随意滚动到某个位置顶
实战需求 SwiftUI Scrollview 如何随意滚动到某个位置顶部中间底部任意位置自定义背景颜色...
Axure教程：上下滚动效果制作步骤详解
如何实现上下滚动效果：（1）让内容在显示区域滚动；（2）内容面板没有接触到顶部时，让内容面板移动至顶部；（3...
vue （记录遇到的问题）
切换路由后滚动条位置不在顶部不生效的情况下监听路由切换设置#app 距离顶部的位置 this 不指向vue的时...