vue+vux scrollTop无法实现定位到具体dom
先看一下最终的运行效果。

项目背景介绍:
技术栈: vue+vux+nodejs
需求:对汽车品牌列表可以按照字母进行索引定位
在开发中实现这种需求,心想还不是小菜一碟,作为一个饱经bug的程序员,别的我就不吹了,最起码Ctrl+C用的还是蛮不错的。
虽然我的复制能力MAX,但最起码的功能点还是要先梳理一下。
要实现这个功能统共分两步,
第一根据点击找到需要定位的位置,
第二触发页面滚动直接到这个位置。
so easy 嘛~
我以迅雷不接掩耳盗小铃铛之势就从我的程序小仓库里Ctrl+C了一段代码:
如下:
document.querySelector('#id'); // 获取点击节点找到节点对应的内容然后控制滚动
$(window).scrollTop($('#' + s + '1').offset().top); // 跳转到的位置
因为项目中没有用到jQuery,在用的时候要把$去掉。做了点小改动
document.documentElement.scrollTop = document.querySelector('#id').offset().top);
大吉大利,万无一失,程序跑起来。

貌似不行,翻遍全网只要是用scrollTop 都不行。
因为在vue中使用scrollTo不能赋值,总是0。
在解决程序疑难扎症这一点上,还真没遇到过对手。说了这么多到底怎么做呢?
请自行看下面的总结。
在试错过程中发现scrollIntoView()方法可以实现定位显示。
具体怎么实现的看下面的程序吧,总结一下有三点。
1.在需要定位到的dom中创建一个隐藏的dom
2.设置要定位的dom元素 position:relative 隐藏的dom position:absolute;
3.把点击点定位到隐藏的dom即可
嗯,暂时先总结到这里吧,下面有源码可供参考。
完美~
methods: {
jump(index){
document.getElementById("tchar_nav_"+index).scrollIntoView();
},
},
<!-- 字母导航 start -->
<div class="fixed-nav" style="opacity: 1; display: block;">
<ul class="rows-box">
<li v-for="(item, index) in listAll" :key="index" :id="'char_'+index">
<a @click="jump(index)">{{index}}</a>
</li>
</ul>
</div>
<div class="alert" style="display: none;"><span>Y</span></div>
<!-- 字母导航 end -->
<div class="brand-list bybrand_list" v-for="(item, index) in listAll" :key="index">
<div :id="'tchar_nav_'+index" class="positionTo"></div>
<div :id="'char_nav_'+index" class="tt-small phone-title" :data-key="index">
<span>{{index}}</span></div>
<div class="box">
<ul>
<li id="char_nav_audi" v-for="(item2, index2) in item" :key="index2">
</li>
</ul>
</div>
</div>
<style lang="less" scoped>
.brand-list{
position: relative;
}
.positionTo{
position: absolute;
height: 30px;
background: transparent;
width: 30px;
background: red;
z-index: 99;
top:-46px;
}
</style>

vue+vux scrollTop无法实现定位到具体dom的更多相关文章
- 如何优雅的使用vue+vux开发app -03
如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...
- 如何优雅的使用vue+vux开发app -02
如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...
- 如何优雅的使用vue+vux开发app -01
如何优雅的使用vue+vux开发app -01 很明显下面是个错误的示范: <!DOCTYPE html> <html> <head> <title>v ...
- 在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件
在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件 当触发事件时候 会把当前的dom传给该方法
- vue+vux页面滚动定位(支持上下滑动)
接上篇文章:https://www.cnblogs.com/ligulalei/p/10622778.html在上篇文章中实现了通过使用scrollIntoView()在使用vux的移动端实现了点击锚 ...
- laravel5.4+vue+vux+element的环境搭配
最近因为项目的需要,需要搭配一个这样的环境.之前做过的东西没有这样用过,在网上找了半天不是过于简单就是根本行不通,自己踩了半天的坑,终于搭配成功. 首先下载laravel5.4,直接去官网一键安装包或 ...
- 基于VUE,VUX组件开发的网易新闻页面搭建过程
根据妙味课堂上的一个教程练习总结,供自己复习用 一.功能介绍 一个网易新闻客户端的浏览页面,通过网易新闻的api接口实时获取新闻数据,用vux搭建样式框架,以轮播图,文字滚动,图文列表等形式把内容展示 ...
- H5移动端开发vue+vux
项目src中用到的npm包有(从编译打包到最终部署仍不能移除)1:vue 渐进式 JavaScript 框架 http://cn.vuejs.org/v2/guide/2: ...
- vue+vux 父组件控制子组件弹层
知识点用到了vue父子组件之间的传值,以及使用watch和v-model控制vux中XDialog组件. 需要注意的问题: 1.父组件向子组件传值使用的是props(单向传值),子组件创建props, ...
随机推荐
- Java 中的 IO 与 socket 编程 [ 复习 ]
一.Unix IO 与 IPC Unix IO:Open-Read or Write-Close IPC:open socket - receive and send to socket - clos ...
- 【登录异常解决】Ubuntu 输入正确的密码后重新返回到登陆界面
症状 Ubuntu 输入正确的密码后,黑屏一闪,重新返回到登陆界面. 原因一:主目录下的.Xauthority文件拥有者变成了root,从而以用户登陆的时候无法都取.Xauthority文件.说明:X ...
- vue的组件基础
组件分为全局组件和局部组件. 组件的核心是template:所有的数据都为template服务. 父组件子组件传值:因为子组件是父组件的个标签,完全等同于添加动态属性: 然后子组件能够通过props: ...
- 通俗bandit算法
[原文链接] 选择是一个技术活 著名鸡汤学家沃.滋基硕德曾说过:选择比努力重要. 我们会遇到很多选择的场景.上哪个大学,学什么专业,去哪家公司,中午吃什么,等等.这些事情,都让选择困难症的我们头很大. ...
- 201621123049《java程序设计》第四周学习总结
1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 继承 类型转换 覆盖 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导图一般不需要出现过多的字. 2. 书面作业 1. ...
- SparkContext初始化之SparkScheduler初始化
- 图像分类(一)GoogLenet Inception_V1:Going deeper with convolutions
论文地址 在该论文中作者提出了一种被称为Inception Network的深度卷积神经网络,它由若干个Inception modules堆叠而成.Inception的主要特点是它能提高网络中计算资源 ...
- 目标检测(六)YOLOv2__YOLO9000: Better, Faster, Stronger
项目链接 Abstract 在该论文中,作者首先介绍了对YOLOv1检测系统的各种改进措施.改进后得到的模型被称为YOLOv2,它使用了一种新颖的多尺度训练方法,使得模型可以在不同尺寸的输入上运行,并 ...
- 目标检测(一)RCNN--Rich feature hierarchies for accurate object detection and semantic segmentation(v5)
作者:Ross Girshick,Jeff Donahue,Trevor Darrell,Jitendra Malik 该论文提出了一种简单且可扩展的检测算法,在VOC2012数据集上取得的mAP比当 ...
- win10系统安装了多个版本的JDK如何切换
本人这台笔记本前面装了jdk8,现在准备用jdk7,我安装好了jdk7:把系统变量中的JAVA_HOME 改为 D:\java\jdk\jdk7\jdk1.7.0_67,Path下添加如下变量,记得加 ...