在以往的做法里首选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. 【react-native】持续踩坑总结

    陆陆续续的已经接触了RN快3个月,整体的感受...感觉在调试兼容andorid问题的时候就像回到了IE时代. 本来想按自己踩坑的路径持续更新一些记录,但是,现实是坑太多,还是统一写一篇汇总一下吧(鉴于 ...

  2. how-to-fix-fs-re-evaluating-native-module-sources-is-not-supported-graceful

    http://stackoverflow.com/questions/37346512/how-to-fix-fs-re-evaluating-native-module-sources-is-not ...

  3. HDFS执行getDatanodeReport输出信息

    HDFS执行getDatanodeReport输出信息: Name: (192.168.101.100) Hostname: bigsrv Decommission Status : Normal C ...

  4. Drawable(7)让一个没有pressed状态的控件使用StateList,显示pressed图片。

    TextView没有按下状态,Button有. 如图1,内容1在一个TextView上,默认它并没有按下状态. 如何让TextView有呢. 在xml中加入属性: android:clickable= ...

  5. SpringCloud开发学习总结(六)—— 结合注解的AOP示例

    面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一个热点,也是Spring框架中的一个重要内容,是函数式编程的一种衍生范型.利用AOP ...

  6. HDU 5996 博弈

    http://acm.hdu.edu.cn/showproblem.php?pid=5996 博弈论待补. 这题变化了一下,因为注意到奇数层的东西(层数从1开始),对手可以模仿地动,那就相当于没动. ...

  7. D. Alyona and a tree 公式转换 + 分块暴力

    http://codeforces.com/problemset/problem/740/D 对于每一对<u, v>.设dis[u]表示root到点u的距离,那么dis<u去v> ...

  8. ZOJ 3605Find the Marble(dp)

    ZOJ 3605 大体意思就是 找出随机选了K个交换后 石子在第i个罐子里的概率最大 也就是可能的总数最大 这样就可以写出递推方程 dp[i][j][k] += dp[i-1][e][k]; (0&l ...

  9. Spring @Resource、@Autowired、@Qualifier区别

    @Resource默认是按照名称来装配注入的,只有当找不到与名称匹配的bean才会按照类型来装配注入: @Autowired默认是按照类型装配注入的,如果想按照名称来转配注入,则需要结合@Qualif ...

  10. canvas 保存状态

    1.保存和恢复绘图状态: 在绘制图形时,难免会重复使用某个样式,甚至有时会在不同颜色之间来回切换. 那么为了减少代码冗余,我们可以调用画布中的save()方法,来帮我们 保存一些样式和属性,这样我们就 ...