在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法。如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问题的,之前参考了一位博主的想法:通过在一定时间内定时分步长滚动,连续起来后肉眼观察就是平滑滚动的效果(点击查看),当时看到这篇文章我是心花怒放,赶紧参考代码写进去,然并卵。。。根本没有效果,后来联系博主讨论后得出结论可能是我的vue2.4版本对计时器不友好,建议我降版本,这样的话。。。我还是继续研究如何实现吧,最后实在查不到想不出什么好的方法,引入了jquery然后用animate方法几条代码就实现了这效果。

        1.npm安装jquery: npm install jquery --registry=https://registry.npm.taobao.org --verbose
        2.安装成功后修改webpack配置文件:build--webpack.base.conf.js,修改如下图所示:
 

        3.在vue模板的script中import这个jquery插件,然后就可以用了。我的项目里导航和其他模块是不同组件,然后利用发射接收的方法来利用index进行操作(发射接收的方法在我之前的博文有详细介绍,点击查看),平滑效果主要看我红框里的代码就可以,其他代码是我项目里的东西,不需要考虑:
 

        到此已经实现了平滑滚动的效果,但这种方法只是一种权宜之计并不是最好的做法,还需要继续研究,若有更好的办法我会分享出来,大神们有更好的解决办法希望可以不吝赐教。。。
 
 
        如需转载请注明出处:http://www.cnblogs.com/zishang91/p/7605336.html,以便有错误可以及时修改,若有错漏不足之处,请见谅并且指点,谢谢!!!
   
 
 

Vue如何引入jquery实现平滑滚动到指定位置效果的更多相关文章

  1. JQuery控制滚动条滚动到指定位置

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. jquery操作滚动条滚动到指定位置

    <html><head><script type="text/javascript" src="/jquery/jquery.js" ...

  3. js 获取滚动位置,滚动到指定位置,平滑滚动

    1.获取当前滚动条位置信息 var top = dom.scrollTop; // 获取y轴上的滚动位置 var left = dom.scrollLeft; // 获取x轴上的滚动位置 2.滚动到指 ...

  4. [转]用 jQuery 实现页面滚动(Scroll)效果的完美方法

    转自: http://zww.me/archives/25144 很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug: ...

  5. 利用jquery制作滚动到指定位置触发动画

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...

  6. jquery滚动到指定位置

    利用jquery实现页面可视区滚动到指定位置.直接上代码 //滚动到指定位置 function scrollTo(element,speed) { if(!speed){ speed = 300; } ...

  7. js控制滚动条平滑滚动到制定位置

    http://www.daixiaorui.com/read/92.html 滚动到顶部: $('.scroll_top').click(function(){$('html,body').anima ...

  8. jQuery滚动条回到顶部或指定位置

    jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...

  9. 自定义ScrollViewer的Touch事件--触摸上下移动ScrollViewer滚动到指定位置

    double mPointY;//触摸点的Y坐标 double mOffsetY;//滚动条当前位置 bool mIsTouch = false;//是否触摸 //触摸事件 private void ...

随机推荐

  1. c语言程序设计案例教程(第2版)笔记(一)—零散、输入输出、最小公倍数、选择排序、冒泡排序

    零散知识点: 非格式化输入输出:getchar().putchar() 格式化输入输出   :scanf().printf() 字符串输入输出   :gets() 或 scanf().puts() 或 ...

  2. 《windows核心编程系列》十五谈谈windows线程栈

    谈谈windows线程栈. 当系统创建线程时会为线程预订一块地址空间区域,注意仅仅是预订.默认情况下预定的这块区域的大小是1MB,虽然预订这么多,但是系统并不会给全部区域调拨物理存储器.默认情况下,仅 ...

  3. 机器学习基础算法__python实现(基于numpy等基础库)

    # 博客转自https://blog.csdn.net/weixin_39561100/article/details/80879211 主要是将<机器学习实战>中的算法实现一遍,后续会慢 ...

  4. Android偏好设置(3)启动偏好设置后显示的界面PreferenceActivity和PreferenceFragment

    Creating a Preference Activity To display your settings in an activity, extend the PreferenceActivit ...

  5. C#关于html颜色值的转化 ColorTranslator

    //颜色转换非常重要快速的转换类. ColorTranslator.FromHtml (); //从html字符串得到颜色 ColorTranslator.ToHtml();

  6. 用vue写的移动端车牌号输入法

    效果图: (录制了视频演示,然而不会上传.....心塞.....) 本页面所在项目已上传GitHub,github下载地址:https://github.com/dan-Zd/car-vueapp  ...

  7. spark on yarn模式下内存资源管理(笔记2)

    1.spark 2.2内存占用计算公式 https://blog.csdn.net/lingbo229/article/details/80914283 2.spark on yarn内存分配** 本 ...

  8. iOS programming UITableView and UITableViewController

    iOS programming  UITableView and UITableViewController A UITableView displays a single column of dat ...

  9. linux下mysql开启可访问

    修改mysql配置连接信息 将bind-address注释 vim /etc/my.cnf 修改mysql用户授权 mysql>GRANT ALL PRIVILEGES ON *.* TO ' ...

  10. txt通过 vb编程导入 excel

    Private Sub CommandButton1_Click() '按钮触发, '按钮触发,目前支持ASNI文本的数据, 单行 fileToOpen = Application.GetOpenFi ...