vue 爬坑之路监听滚动事件实现动态锚点

2024-09-04

Vue 爬坑之路（七）—— 监听滚动事件实现动态锚点

前几天做项目的时候,需要实现一个动态锚点的效果如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动? 2. 如何监听页面滚动事件? 在浏览了大量文章.进行多次尝试之后,终于解决了这些问题期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 mounted 一.锚点实现在实现平滑滚动之前,得先确保基本的锚点功能如果没有其他要求,直接用 <a href="#i

vue监听滚动事件，实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

Vue 爬坑之路（六）—— 使用 Vuex + axios 发送请求

Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求前言: Vuex 的安装将不再赘述,可以参考之前的博客 Vue 爬坑之路(四)-- 与 Vuex 的第一次接触使用 cnpm 安装 axios cnpm install axios -S 安装其他插

Vue 爬坑之路（九）—— 用正确的姿势封装组件

迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作通用组件必须具备高性能.低耦合的特性为了满足这些特性,开发的时候有很多需要注意的地方,这里我和大家分享一下我的心得一.数据从父组件传入为了解耦,子组件本身就不能生成数据.即使生成了,也只能在组件内部运作,不能传递出去. 父对子传参,就需要用到 props,通常的 props 是这样的:

vue监听滚动事件-元素固定位置显示

1.监听滚动事件用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.handleScroll) } methods: { handleScroll () { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop console.l

Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue/cli 3.x 已经发布,如果使用 3.x 构建项目,请参考<Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目> 一. 安装 node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包. 只是这样安装的 node 是固定版本的,如果需要

Vue 爬坑之路（十二）—— vue-cli 3.x 搭建项目

Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vue/cli 如果之前全局安装了旧版本的 vue-cli (1.x 或 2.x),首先需要使用以下命令卸载掉 // 如果没有安装旧版本的 vue-cli 可以跳过卸载直接安装 npm uninstall vue-cli -g # OR yarn global remove vue-cli 然后重新安装

vue监听滚动事件实现某元素吸顶或者固定位置显示

https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件利用VUE写一个在控制台打印当前的scrollTop, 首先,在mounted钩子中给window添加一个滚动滚动监听事件, mounted () { window.addEventListener('scroll', this.handleScroll) }, 然后在方法中,添加这个handleScroll方法 handleScroll () { var

vue监听滚动事件

vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted(){ window.addEventListener('scroll',this.handleScroll) // 监听滚动事件,然后用handleScroll这个方法进行相应的处理 }, 处理方法 1. 滚动到顶部吸附 html元素 <!--如果isFixed为true的话,就添加class is

VUE 实现监听滚动事件，实现数据懒加载

methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop } else if (document.body) { scrollTop = document.body.scrollTop } retu

vue2.0 添加监听滚动事件

export default { data () { return { isFixed: true } }, mounted () { window.addEventListener('scroll', this.scroll, false) }, destroyed () { window.removeEventListener('scroll', this.scroll, false) }, methods: { scroll () { if (document.body.scrollTop

Vue 爬坑之路—— 使用 Vuex + axios 发送请求

Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求前言: 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use(),但是 axios 并不能 use,

vue爬坑之路1-路由跳转全新页面以及二级页面配置

之前也在网找了一些答案,比较零碎,特此总结下,废话不多说,直接上干货! 路由跳转全新页面首先在app.vue中先定义router-view,这是主路由. 在router的index.js中引入login首页模板,配置首页模板路由再在main.js中配置默认展示页面在login.vue中配置点击事件,添加跳转路由,则跳转到subject页面,subject组件也需要像login页面一样在router中的index.js中配置路由,则跳转全新页面则已完成. 二级路由配置配置二级页面之前遇到的

Vue 爬坑之路（二）—— 组件之间的数据传递

Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,components 文件夹下都是子组件. 一.父组件向子组件传递数据在 Vue 中,可以使用 props 向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组件获取 logo 的值,就需要使用 props: ['lo

Vue 爬坑之路（四）—— 与 Vuex 的第一次接触

在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/6266038.html 但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便.Vue 的状态管理工具 Vuex 完美的解决了这个问题. 一.安装并引入 Vuex 项目结构: 首先使用 npm 安装 Vuex cnpm install vuex -S 然后在 main.js 中引入

Vue 爬坑之路（八）—— 使用 Echarts 创建图表

在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts, Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件使用 cnpm 安装 Echarts cnpm install echarts -S 和之前介绍的 axios 类似,echarts 也不能通过 Vue.use() 进行全局调用通常是在需要使用图表的 .vue 文件中直接引入 import echarts from 'echarts' 也可以在 main

Vue 爬坑之路（五）—— 组件进阶

组件(Component)是 Vue.js 最强大的功能之一,之前的文章都只是用到了基本的封装功能,这次将介绍一些更强大的扩展. 一.基本用法在使用 vue-cli 创建的项目中,组件的创建非常方便,只需要新建一个 .vue 文件,然后在 <template> 中写好 HTML 代码,一个简单的组件就完成了一个完整的组件,除了 <template> 以外,还有 <script> 和 <style> 需要注意的是,<script> 中的 dat

Vue 爬坑之路（三）—— 使用 vue-router 跳转页面

使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 有很多朋友找我要 demo,但是博客中的这个案例被我删掉了,我只好随手写了一个超简单的 demo,希望能有所帮助链接:http://pan.baidu.com/s/1nvqfA1V 密码:79bv 这次的实例

Vue 爬坑之路（十一）—— 基于 Nuxt.js 实现服务端渲染（SSR）

直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后,一个基于 Vue.js 的服务端渲染应用框架应运而生,与 Next.js 异曲同工,这就是 Nuxt.js 一.快速模板在已经安装了 vue-cli 的前提下,可以快速创建一个 nuxt 的项目模板 vue init nuxt-commu

Vue 爬坑之路（十）—— Vue2.5 + Typescript 构建项目

Typescript 在前端圈已经逐渐普及,Vue 2.5.0 改进了类型声明,使得对 TypeScript 更加友好不过要想在项目中直接使用 TypeScript 仍然需要对项目进行一些改造 PS: 建议使用 Visual Studio Code 进行开发 vue-cli 3.0 可以直接创建 typescript 项目,不过目前还只有 beta 版,有兴趣的朋友可以尝试一下一.安装依赖首先还是用 vue-cli 生成项目 vue init webpack demo 然后安装必要依赖

vue 爬坑之路 监听滚动事件 实现动态锚点

热门专题

vue 爬坑之路监听滚动事件实现动态锚点