vue实现元素快速定位

需求：一个列表中有可能会有N多条数据，我在选择一个item查看详情的情况下。如果上下滚动想要再次找到这个位置的时候可能会很麻烦了，需要滚动滚动再滚动。所以，就需要一个悬浮的上下箭头去快速定位到刚才的位置。以下是我做的效果~~~

实现思路：

1.首先要监听到滚动条滚动事件

<div @click="scrollFun" class="parentBox"> // 这里如果@click没有监听到，可以试试@click.native<div v-for="item in 2000"><p @click="clickItem">{{item}}</p> // 每一行要展示的东西</div>
</div>

2.点击这一行的时候获取这个item距离父元素顶部的距离（因为我这个数据比较多并且是一个tree树，所以我用的是获取这个元素的索引然后乘以一行的高度30px，也能得到它距离顶部的距离

clickItem({index}) { // index表示这一行数据的索引this.itemTop = index * 30; // 这里30的意思是我这一行的高度为30，这一行的索引*30就是距离父元素顶点的高度
}

3.滚动的时候去判断是否在可视区域，并且判断它在遮挡在上面还是下面

scrollFun() { // 监听到滚动就触发这个函数this.isHoverIcon = false; //首先把悬浮的这个图片隐藏let scrollTop = document.querySelector('.parentBox').scrollTop; //滚动条的高度if (this.checkedItem && (scrollTop > this.itemTop + 30 || scrollTop < this.itemTop - 460) { // 460表示我的父盒子高度为460, 30表示我每一行的高度为30this.isHoverIcon = true;if (scrollTop > this.itemTop + 30) {this.hoverIcon = 'shangjiantou';} else if (scrollTop < this.itemTop - 460) {this.hoverIcon = 'xiajiantou';}}
}
// this.isHoverIcon 表示是否展示悬浮的Icon
// this.checkedItem 表示是否有选中的行，如果没有就无论什么情况都不会展示Icon

至此位置，点击icon快速定位就做好了，icon悬浮的css我就不在这里写了。如果有什么问题可直接私信我，嘻嘻

vue实现元素快速定位相关推荐

微信开发者工具元素快速定位审查元素
一般浏览器里鼠标在元素上右键点击审查元素或检查元素即可快速打开开发者工具并定位到该元素,但在微信开发者工具中不支持, 解决方法点击 elements左边的小鼠标图片,然后在主页面点击元素即可快速 ...
find函数 c++语言,【C++】使用find函数快速定位元素
当有了STL,你还在用遍历的土方法定位元素吗? 今天就来介绍一下,如何使用algorithm库里的find函数快速定位数组或向量中的元素. 首先当然要包含头文件: #include 它的基本语法是这样 ...
html5快速开发模板生成器,推荐一个基于Vue 的 H5 快速开发模板
本项目以基于 vue-cli4 和 Vant-ui 搭建的,进行移动端开发中的一些最佳实践方案模板地址动动你的小手点颗star 样式适配在移动端网页开发时,样式适配始终是一个绕不开的问题.对此目 ...
2017 Vue.js 2快速入门指南
注意,据部分读者反映本文水多,怕湿身者勿进.后续推荐详解 Vue & Vuex 实践 2017 Vue.js 2快速入门指南翻译自Vue.js 2 Quickstart Tutorial 20 ...
Swift之实现表格UITableView数据首字母顺序排列展示并添加“索引”快速定位查找功能
整理数据获取汉字拼音的首字母 /**获取汉字拼音的首字母, 返回的字母是大写形式, 例如: @"俺妹", 返回 @"A".*如果字符串开头不是汉字, 而是字母 ...
WebDriver API元素的定位
一.以下截图为用FireBug定位的用火狐(Firefox)浏览器打开的百度首页,下面所讲述的八种定位方法,就是以该截图中的百度输入框为例子. ①.FireBug是Firefox浏览器下的开发类插件, ...
seleniumpython定位网页元素方法_使用Selenium对网页元素进行定位的诸种方法
使用Selenium进行自动化操作,首先要做的就是通过webdriver的get()方法打开一个URL链接. 在打开链接,完成页面加载之后,就可以通过Selenium提供的接口,在页面上进行各种操作了 ...
16 | 二分查找（下）：如何快速定位IP对应的省份地址？
问题:假设我们有 12 万条这样的 IP 区间与归属地的对应关系,如何快速定位出一个 IP 地址的归属地呢? 二分查找的变形问题: 变体一:查找第一个值等于给定值的元素 public int bsea ...
推荐一个快速定位深度学习代码bug的炼丹神器！
文 | McGL 源 | 知乎写深度学习网络代码,最大的挑战之一,尤其对新手来说,就是把所有的张量维度正确对齐.如果以前就有TensorSensor这个工具,相信我的头发一定比现在更浓密茂盛! Te ...

vue实现元素快速定位

vue实现元素快速定位相关推荐

最新文章

热门文章