今天在用vue项目中,实现回到顶部功能的时候,我写了一个backTop组件,接下来需要通过监听window.scroll事件来控制这个组件显示隐藏

因为可能会有其他的组件会用到这样的逻辑,所以将此功能做成一个自定义指令:

根据滚动的距离控制一个数据为true还是为false(v-scroll-show)

问题:

唯一需要注意的是,在指令的钩子函数中我们可以访问到el,也就是使用指令的标签,但是我们不能直接更改value(指令的值所代表的数据)

所以我们使用引用类型来进行地址的传递来解决这个问题

接下来有写了一个v-back-top指令,就是将回到顶部功能做成一个指令,哪个组件或者dom需要使用到回到顶部,就加上这个指令就可以,设置不同的参数来控制在不同的情况下触发


<BackTop v-back-top v-scroll-show:300='isBackShow' :isShow='isBackShow'></BackTop> data(){
return {
isBackShow:{value:false}
}
}, js: import Vue from 'vue' Vue.directive('scroll-show',{
inserted(el,binding){
let scope = binding.arg || '200'
window.addEventListener("scroll",function(e){
if(this.scrollY>Number(binding.arg)){
binding.value.value=true
}else{
binding.value.value=false
}
}) }
}) Vue.directive('back-top',{
inserted(el,binding){
let e = binding.arg || 'click'
el.addEventListener(e,function(){
document.documentElement.scrollTop = document.body.scrollTop =0;
})
}
})

vue 回到顶部的小问题的更多相关文章

  1. 浮动【电梯】或【回到顶部】小插件:iElevator.js

    iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null ...

  2. vue回到顶部组件

    html <template> <a href="javascript:;" class="toTop" @click="backT ...

  3. 移动端Vue回到顶部

    html: <div class="totop" id="totop" @click="Top" v-show="totop ...

  4. vue回到顶部的事件

    其实只需要一句代码就好了: document.documentElement.scrollTop = document.body.scrollTop = ;

  5. vue回到顶部

    backTop() { var top = document.body.scrollTop || document.documentElement.scrollTop; this.duration - ...

  6. vue中回到顶部

    1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 该方法可以接受一个布尔值作为参数.如果为true,表示元 ...

  7. vue路由切换时内容组件的滚动条回到顶部

    在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...

  8. Vue.之.回到顶部

    Vue.之.回到顶部 当页面出现上下滚动条时,页面右下角出现回到顶部功能. 在页面上添加如下DIV(写的CSS内部样式),这个DIV功能:出现滚动条往下滑动,就显示出来,反之隐藏.点击DIV快速回到顶 ...

  9. 从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 目录: 1.list加载更多 2.list回到顶部 3.<从微信小程序到鸿蒙js开发>系列文章合集 1.list加 ...

随机推荐

  1. Meteor的初步了解

    最近入职到新一家公司,技术总监给我介绍了一个新技术---Meteor,这是我之前没有接触过的一项技术,我查阅了相关资料,原来这是一项基于Node js的纯Javascript技术,然后给了我们一个项目 ...

  2. c语言的流程控制

    1. 流程控制 ● 顺序结构:默认的流程结构.按照书写顺序执行每一条语句. ● 选择结构:对给定的条件进行判断,再根据判断结果来决定执行哪一段代码. ● 循环结构:在给定条件成立的情况下,反复执行某一 ...

  3. JavaScript(五):函数(闭包,eval)

    1.函数的申明:三种方法: function命令 函数表达式:变量赋值 Function构造函数 //method 1: function命令 function test(){ console.log ...

  4. Django 2.0 新特性 抢先看!

    一.Python兼容性 Django 2.0支持Python3.4.3.5和3.6.Django官方强烈推荐每个系列的最新版本. 最重要的是Django 2.0不再支持Python2! Django ...

  5. openvpn技术实现客户端直接访问远程机器中docker内容器的实现与原理

    传统开发中如果要从开发机中访问服务器中的docker中的服务可能可能需要如下方案: 利用docker run的-p属性直接映射端口到服务器中 优点:客户端直接访问服务器就可以访问到docker容器. ...

  6. 两天快速开发一个自己的微信小程序

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Songti SC" } p.p2 { margin: 0.0px 0. ...

  7. Swift Runtime ?

    你肯定也想过 在OC中相信每一个iOS开发都知道Runtime, 现在Swift也更新到4.0版本了,要是你也学习过Swift的话你可能也会想过这样一个问题,OC大家都是到是有动态性的,你能通过run ...

  8. python 生成html文件(表格)

    import pandas as pd def convert_to_html(result,title): d = {} index = 0 for t in title: d[] = result ...

  9. CCF-201412-3-集合竞价

    问题描述 试题编号: 201412-3 试题名称: 集合竞价 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 某股票交易所请你编写一个程序,根据开盘前客户提交的订单来确定某特定 ...

  10. 矩阵的奇异值分解(SVD)(理论)

    矩阵的奇异值分解(Singular Value Decomposition,SVD)是数值计算中的精彩之处,在其它数学领域和机器学习领域得到了广泛的应用,如矩阵的广义逆,主分成分析(PCA),自然语言 ...