文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

我所知道的 vue-router

a 标签经常做的事；a 的标签用 href 属性来指定导航的目标地址，而 link> 组件则用 to 属性来定目标地址； : 是路由的出口，路由匹配到的组件将...当切换到新路由时，我想要想要页面滚到顶部！！！ 当切换到新路由时，保持原先的滚动位置！！！！ 当切换到新路由时，我想随意定位！！！！ 这时候该怎么办？？？...告诉你 vue-router 能做到，而且很很好，它让你可以自定义路由切换时页面如何滚动。...const router = new VueRouter({ routes, scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置...return {x:0,y:0} //对于所有路由导航，简单地让页面滚动到顶部 } }) 路由监听 watch 在 vue 中 watch 用来监听当一个数据属性值发送变化时，就可以调用的函数

56120
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    一杯茶的时间，上手 Gatsby 搭建个人博客

    /gatsby-browser.js 可以调用 Gatsby 浏览器 APIs[14]，一般插件才会用到，如滚动到特定位置。 /gatsby-ssr.js 服务器渲染的配置，一般也是插件才用到。...在 Gatsby 中，根据 js 文件的位置不同，使用 GraphQL 有两种形式，且 Gatsby 对其做了魔法，在 src/pages 下的页面可以直接 export GraphQL 查询，在其它页面需要用...我在修改 starter 时踩到一个坑是复制组件时忘了修改 static query 查询语句的名称，导致重名报错。 避免错误最好方式是在 GraphiQL 编辑器中写好运行无误再复制到组件中。...我们当然不希望迁移后原有的链接无法访问，这不仅影响到 SEO ，更带来了不好的用户访问体验。本文将聊聊怎么让 Gatsby 兼容 Jekyll 式路径。...Gatsby 如何生成特定页面 一般来说，在 /src/pages/ 目录下的组件会自动生成相应路径的页面，但如果是其它类型的文件就不会了。

    4.3K20

    用 Gatsby 创建一个博客

    您通常希望使用 gatsby develop 来启动本地开发服务器，以验证我们在步骤中所完成的功能。 添加必要的插件 Gatsby 支持使用丰富的插件，很多非常有用的插件都是为了完成普通任务而编写的。...在安装了这些功能插件之后，我们将编辑 gatsby-config.js。Gatsby 在构建时加载指定插件的公开功能。...一个 options 对象可以传递给一个插件，我们正在传递文件系统路径(也就是我们的 Markdown 文件将被定位的位置)，然后是源文件的名称。...import React from 'react'; import Link from 'gatsby-link'; import Helmet from 'react-helmet'; // import...实际的 React 组件是相当琐碎的，需要注意一点，当链接到内部内容时，你应该经常使用 gatsby-link。 如果页面没有通过这个实用工具进行路由，Gatsby 就无法工作。

    3.5K30

    【愚公系列】《微信小程序与云开发从入门到实践》010-基础视图组件与滚动视图组件

    基础视图组件提供了构建页面布局的基本元素，而滚动视图组件则为用户提供了流畅的滚动体验，适用于展示大量信息和内容的场景。...本篇文章将深入探讨微信小程序中的基础视图组件与滚动视图组件，详细介绍它们的特性、常用属性及用法示例。我们将通过实例来演示如何灵活运用这些组件，帮助你理解其在实际开发中的应用场景。...默认生成的 index.js 文件可能包含一些额外的代码，您可以将其删除，只保留最基本的内容。...设置用户取消按下组件时，点击态的保留时间 需要注意，view 组件中的子组件如果超出了view组件本身，超出部分将无法展示，如果需要滚动查看，则需要使用scroll-view组件...，即内容变化而不抖动 refresher-enabled 布尔值 设置是否启用下拉刷新

    76800

    【JSjQuery——功能实现】传送门（蓝桥杯真题-2458）【合集】

    背景介绍 日常浏览网页的时候，我们会发现一个问题，当页面太长、内容太多的时候我们很难快速浏览到心仪的内容。...具体需求如下： 点击页面侧边的顶部、中间或底部按钮，页面滚动到顶部、中间或底部对应的范围内。这三个范围的设定如下： 顶部：滚动条距离页面顶部 0 ～ 960px（不包含 960）的范围。...中间：滚动条距离页面顶部 960 ～ 1920px（包含 960，不包含 1920）的范围。 底部：滚动条距离页面顶部大于等于 1920px 的范围。...当页面滚动到顶部、中间或底部位置时，对应的侧边按钮（即，顶部、中间或底部按钮）添加激活样式（即 **.active-color**），其余按钮样式变为默认（即 **.default-color**）。...实现侧边按钮文字颜色随页面内容滚动而变化功能，得 3 分。

    1.5K00

    React项目中如何实现一个简单的锚点目录定位

    前言 锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节 如何在React中实现锚点定位和平滑滚动 目录自动高亮的实现思路 处理顶部导航遮挡锚点的解决方案 服务端渲染下的实现方案...问题解析 遮挡问题 有时锚点会被固定的Header遮挡,此时滚动会定位到元素上方,用户看不到锚点对应的内容。...但是在Next.js的SSR环境下就会有问题: 点击目录链接时,页面不会滚动。 这是因为在服务端,我们无法获取组件的ref,所以锚点元素不存在,自然无法定位。 滚动页面时,目录高亮也失效。...服务端渲染的静态HTML中,并没有绑定滚动事件,所以无法自动高亮。 预取数据 首先,我们需要解决点击目录链接的问题。 既然服务端无法获取组件ref,那就需要在客户端去获取元素位置。...这里有两个方法: 组件挂载后主动缓存元素位置 // Chapter组件 useEffect(() => { // 缓存位置数据 cacheElementPosition(chapter.id,

    3K20

    这一次，彻底解决滚动穿透

    首先，一般而言滚动不是我们自己监听事件去改变元素的位置而实现的，当我们设置 overflow:scroll/auto时，实际上是浏览器原生实现的滚动效果。...;} 这个想法很美好，在不侵入JS的情况下禁止滚动，然而： 只加 overflow:hidden对移动端是无效的！...： 该方案会让浏览器的滚动条默认重置于初始位置 要解决这个问题，首先想到的方案是在添加 overflow之前，先记录当前浏览器的 scrollTop值，然后在添加之后重置 scrollTop，效果如下：...（请注意蒙层出现时，底部列表发生的变化） 在这个交互过程中，浮层弹出时，底部列表首先滚动条被置为初始态，关闭浮层后重置为之前的记录位置。...这样一来只需要在可滚动的容器上加入 can-scroll类名即可滚动，但是这种滚动又随之带来一个问题： 当滚动到元素顶部和底部再继续滚动时，又会触发滚动穿透！

    3.5K21

    TDesign 更新周报（2022年6月第3周）

    组件库Vue2 for Web 发布 0.42.1FeaturesForm：实例方法 reset 支持重置指定字段，新增参数 { type:'initial' | 'empty', fields:number...[] }实例方法 validate 支持值校验而不显示每个组件的错误信息文本，新增参数 { showErrorMessage }FormItem 支持自定义 help 内容，插槽和渲染函数均可新增纯净的校验方法... validateOnly，专门用作校验，不带任何副作用修复TagInput 组件按下 Enter 时触发 submit 事件，不再触发Dialog：优化动画初始位置Bug FixesTable:修复 ...table 透传 loading size 为枚举无效的问题优化吸顶和吸底的位置，支持带有 offsetBottom 和 offsetTop 特性的位置定位Select:修复 t-option 异步加载问题修复分组为空未展示分组名称的问题优化虚拟滚动示例...，disableTime API 有所调整, 调整交互为点击确认按钮保留改动, 直接关闭弹窗不保留改动恢复初始值，存在不兼容更新FeaturesTable：筛选对话框输入筛选内容之后按回车应该和按确定按钮一样

    4K10

    📚一站式解决：H5开发全攻略，看这篇让你省时又省力

    1px则不进行转换 mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false replace: true, // 是否直接更换属性值，而不添加备用属性...当内容滚动到顶部或底部时，滚动事件不会继续传递给父容器。...解决方案 使用 react-sticky 组件：通过计算 组件相对于组件的位置进行工作。...现象 滚动穿透（scrolling through）是指在一个固定区域内滚动时，滚动事件透过该区域继续传递到其下方的元素，导致同时滚动两个区域的现象。...组件库解决方式 思想思路： 针对触摸滑动事件 touchmove，通过监听滑动方向和滚动元素的状态，决定是否阻止默认的滑动行为，从而防止滚动穿透。

    2.7K21

    清除“请允许观看视频”通知页面的完整指南

    现在点击屏幕顶部的“安全”选项。您现在将看到MalwareBytes在扫描计算机时将使用的设置。向下滚动直到看到“扫描选项”。在此屏幕，请通过点击切换开关启用“扫描Rootkit”设置，使其变为蓝色。...请注意，此方法将移除所有附加组件、扩展、工具栏和其他自定义设置，但将保留您的书签和收藏夹。对于计算机上安装的每个浏览器，请点击下面的浏览器图标并遵循显示的步骤重置该浏览器。...滚动到最底部，您将看到一个“显示高级设置...”选项。点击“显示高级设置...”选项打开高级设置屏幕。滚动到最底部直到看到重置按钮。现在点击重置按钮。...此过程还将禁用任何已安装的工具栏和附加组件。但是，您的所有收藏夹将被保留。要重置Internet Explorer，打开程序并点击窗口右上角的Internet Explorer菜单按钮（）。...它通过移除所有附加组件和个性化配置设置来实现这一点。但是，您的所有书签将被保留。要重置Firefox，打开程序并点击窗口右上角的Firefox菜单按钮（）。这将打开Firefox的主菜单。

    53210

    Vue路由详解(命名视图,路由守卫)

    * 在内容的组件里写标签,标签有name属性,如果不写,这个插口放置的是设置的默认的组件. * 新建两个想要显示的组件 * index.js页面进行配置 例: (这里不再写新建组件...:[ {path:'/aux', component:MyAux,children: [ //name值为头组件link>标签to属性的name值 {path:...; if(res){ next(); } }, 5.滚动行为 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置...vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 注意: 这个功能只在支持 history.pushState 的浏览器中可用。...当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法： 这个方法返回滚动位置的对象信息，长这样： { x: number, y: number } { selector:

    2.3K10

    fullPage.js全屏滚动插件

    如果你要制作一个全屏的网页，使用这个插件在合适不过，如QQ浏览器官方网站 直接下载 使用方法 1.引入fullpage.css文件 link rel="stylesheet" type="text...controlArrowColor:'red',//左右滑块背景颜色 }); 4.参数设置 传递对象形式 参数 说明 resize (true/false)字体是否随着窗口缩放而缩放...controlArrowColor (string) 左右滑块的箭头的背景颜色 loopBottom (true/false)滚动到最底部后是否滚回顶部 loopTop (true/false)...滚动到最顶部后是否滚底部 loopHorizontal (true/false)左右滑块是否循环滑动 autoScrolling (true/false) 是否使用插件的滚动方式，如果选择 false...continuousVertical (true/false)是否循环滚动，与 loopTop 及 loopBottom 不兼容 5.常用方法 -- -- moveSectionUp() 向上滚动

    18.6K20

    防御式CSS是什么？这几点属性重点防御！

    在下面的例子中，我们有一个带有照片的卡片组件。它看起来不错。 当用户上传一个不同大小的图像时，它将被拉伸。这可不是什么好事。看看图像是如何被拉伸的!...最简单的修复方法是使用CSS object-fit。...默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。...我们可以应用一种方法，在CSS变量值因某种原因为空的情况下，以一种不破坏体验的方式使用它们。 通过 JS 输入CSS变量的值时特别有用。...而auto-fill将保留可用的空间，而不改变网格项的宽度。 也就是说，使用auto-fit可能会导致网格项目太宽，特别是当它们小于预期时。考虑一下下面的例子。

    5.8K30

    如何让页面记住用户的滚动位置？

    但每当用户点击某个商品查看详情后再返回时，页面总是会回到顶部，这让用户不得不重新滚动查找之前的位置。 问题出在哪里？在单页应用(SPA)中，Vue Router在切换路由时默认不会记住滚动位置。...这就导致了：用户滚动到页面某个位置点击进入详情页返回时页面重置到顶部用户需要手动重新滚动到之前的位置这种体验很不好，尤其是对于需要频繁查看详情的用户来说，反复滚动会大大降低工作效率。解决方案1....通过上述操作，当用户从列表页跳转到详情页再返回时，列表页可以读取 localStorage 中的值并恢复到之前的位置，用户就不需要重新滚动了。...而当用户彻底离开这个功能区时，这个记忆又会被清除，非常人性化吗，实现了“智能”的滚动位置记忆功能。...写在最后希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家支持一下哦~ **❤️原创不易，期待你的关注与支持~点赞+收藏⭐️+评论✍️之后我会继续更新前端学习小知识，关注我不迷路~**

    45210

    条件渲染的「状态保留」难题，React 19.2终于给出了官方答案

    (useEffect cleanup执行) ↓ 内部状态、表单数据、滚动位置...全部丢失 痛点: ❌ 状态彻底丢失 (useState被清空) ❌ 表单数据重置 (用户输入白填) ❌ 滚动位置归零...React 19.2的解决方案: 组件 核心设计理念 React团队终于意识到:"我们需要一个原生的、官方的、优雅的方案来处理'隐藏但保留状态'这个场景。"...+ Effect清理 → 完美 场景2: Tab切换不丢失滚动位置 真实场景: 在腾讯文档的评论区,用户滚动到第100条评论,切换到"修订历史"Tab,再切回来,滚动位置被重置了。...条件渲染 150ms 150ms 低 ❌ 丢失 CSS隐藏 450ms 0ms 高 ✅ 保留 200ms 0ms 中 ✅ 保留 解读: 条件渲染: 每次切换都重新渲染,滚动位置丢失...决策树: 你的组件切换频率如何? │ ├─ 频繁 (每分钟多次) │ │ │ └─ 组件渲染速度?

    34510
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券