文章 2024-08-10 来自:开发者社区

墙裂推荐!Vue3 实现B站页面滚动开启小屏播放功能,超简单!!

最近在浏览B站(Bilibili)时,我发现了一个非常实用的功能:当你在观看视频时,如果向下滚动页面,视频会自动缩小并固定在页面的一角继续播放。 这种小屏播放功能极大地提升了用户体验,让用户即使在浏览其他内容时也能继续观看视频。 于是我决定在自己的项目中实现这一功能。 效果演示 ...

墙裂推荐!Vue3 实现B站页面滚动开启小屏播放功能,超简单!!
文章 2024-07-02 来自:开发者社区

vue【解决方案】页面/路由跳转后,滚动条消失,页面无法滚动

原因解析 vue项目中,页面/路由跳转后,body 的内联样式变成 overflow:hidden 解决方案 使用路由守卫,在页面/路由跳转后,将body 的overflow设置为auto src/main.js // 解决...

文章 2024-07-02 来自:开发者社区

Vue Router【详解】含路由配置、路由定义、路由跳转、路由传参、自动注册路由、路由守卫、页面滚动、监听路由、$route、$router、路由过渡动画等

Vue Router简介 Vue Router 官网  https://router.vuejs.org/zh/guide/#html Vue Router 用于对vue项目中的路由进行管理,每个路由对应的页面,通过<router-view></router-view> 进行渲染,可以配合 <transition> 和 &l...

文章 2024-07-01 来自:开发者社区

vue 组件封装 | s-scroll 页面滚动动画

目标 实现类似插件 wow.js 的页面滚动时,加载动画的效果( wow.js的教程详见 https://blog.csdn.net/weixin_41192489/article/details/111088137) 实现思路 根据指定元素与浏览器窗口顶部的距离是否小于浏览器窗口的高度来判断元素是否进入浏览器窗口 核...

vue 组件封装 | s-scroll 页面滚动动画
文章 2024-07-01 来自:开发者社区

vue 页面向下滚动到指定位置时,顶部显示悬浮搜索框

效果可参考天猫首页 https://www.tmall.com/ 核心代码 添加对页面滚动事件的监听 ...

vue 页面向下滚动到指定位置时,顶部显示悬浮搜索框
文章 2024-07-01 来自:开发者社区

vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部

效果 见天猫官网 https://www.tmall.com/ 点击瞄点平滑滚动到目标位置 实现原理:点击锚点后,自动计算目标元素进入页面所需滚动的距离,通过计时器递归调用函数...

vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
文章 2023-09-16 来自:开发者社区

返回顶部vue、监听页面滚动(整理)

<template> <div class="crestBox pointer" @click="crestCick()" v-if="isVisable == true"> 返回 </div> </template> <script>...

返回顶部vue、监听页面滚动(整理)
文章 2023-08-08 来自:开发者社区

vue页面设置滚动失败的解决方案(scrollTop一直为0)

vue页面设置滚动失败的解决方案(scrollTop一直为0)背景希望页面能跳转到 某一位置用到了scrollTop属性。可是发现给某个div设置该属性后,一致为0。找了很多方案,但不都适合自己,或者说不知道是否适合。怎么看我这个方法适不适合你你可以尝试打印滚动条的位置,页面滚动后,再次打印滚动条的位置,如果一直为0的话,那我的的这个方法就可以解决你遇到...

vue页面设置滚动失败的解决方案(scrollTop一直为0)
文章 2023-06-20 来自:开发者社区

解决vue路由跳转后页面滚动位置问题

在最近的项目中,路由跳转后发现并不会切换到新路由页面的顶部。 查询资料后发现文档里有解决方案。在router.js中加入scrollBehavior () { return { top: 0 }; }问题解决。

解决vue路由跳转后页面滚动位置问题
文章 2022-04-15 来自:开发者社区

事件监听 & 页面滚动(页面滚动到某一位置时显示/隐藏某元素,Vue环境)

一、效果展示        最近在做项目时有一个网页渲染是这样的,某一个元素在开始不显示,只有当页面滑动到指定的位置时才显示该元素。效果如下:二、实现步骤1. 创建元素并设置为固定定位。2. 首先使用 Vue 中的显示隐藏指令 v-show 将需要操作的元素隐藏;3. methods 中创建监听窗口滚动方法,通过判断元素最顶端...

事件监听 & 页面滚动(页面滚动到某一位置时显示/隐藏某元素,Vue环境)

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注