哈哈哈，昨天登QQ的时候，意外发现有人看了我写的博客，居然还加了我，这就激起了我内心的小波澜啊

公司最近在做电商，用的前端框架依然是VUE

矩MAX(微信公众号)可以搜的到哦，安卓商店或苹果AppStore也可以搜的到

回归中体哈，说一下今天做的领券中心

有点类似于京东的领券中心，刚测试完，券全被我领啦

效果就是点击立即领取，文字变为立即使用、弹出领取成功

但是因为接口不是实时的，所以我没有通过接口数据判断让用户点击领取的同时，让优惠券改变状态

但是，毛爷爷说过：办法总比困难多~

当领取成功后，页面会重新走一遍获取优惠券的接口

所以  我写了一个时间函数setTimeout

通过this.$el.querySelector("#coupon_list").children[this.currentNum].offsetTop获取当前 点击的元素的offsetTop值

当领取成功之后，页面回跳至 该元素的原位置

vue中，在不方便使用ref来改变的时候咱们可以通过原生js来修改元素的属性样式

嗯 好吧  ，就说这些废话吧

我是菜鸟

如果你觉得我写的很垃圾，欢迎批评指正

vue 页面滚动到原位置的更多相关文章

  1. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  2. 微信小程序（13）--页面滚动到某个位置添加类效果

    微信小程序页面滚动到某个位置添加类,盒子置顶效果. <!-- vh,是指CSS中相对长度单位,表示相对视口高度(Viewport Height),1vh = % * 视口高度 --> &l ...

  3. 【特效】页面滚动到相应位置运行css3动画

    请到我的个人博客网站上浏览此文章,欢迎评论和建议. 文章链接:http://www.xiaoxianworld.com/archives/87 现在css3动画很常见了,实际项目中经常应用,特别是那种 ...

  4. js 页面滚动到指定位置

    当页面的长度比较长时,如果进行刷新页面,我们希望能够在刷新完成页面之后,能够停留在当前位置,而不是从头再手动滚动到当前位置. 那么这样的效果如何实现呢?下面开始简单描写(由于博客园不支持效果展示,所以 ...

  5. 每天一点点之 uni-app 框架开发 - 页面滚动到指定位置

    项目需求:在页面中,不管位于何处,点击评论按钮页面滚动到对应到位置 实现思路如下: uni.createSelectorQuery().select(".comment").bou ...

  6. 微信小程序页面滚动到指定位置

    页面上有一个元素或者组件,id 为 comment 则: var me = this; var query = wx.createSelectorQuery().in(me); query.selec ...

  7. vue+vux页面滚动定位(支持上下滑动)

    接上篇文章:https://www.cnblogs.com/ligulalei/p/10622778.html在上篇文章中实现了通过使用scrollIntoView()在使用vux的移动端实现了点击锚 ...

  8. ASP.Net页面刷新后自动滚动到原来位置

    在网上搜索之后总结了三种方式: 1.设置Page中的MaintainScrollPositionOnPostback属性为true A>.页面里有MaintainScrollPositionOn ...

  9. js实现一个长页面中的图片懒加载即滚动到其位置才加载

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

随机推荐

  1. Elastic Stack 笔记（五）Elasticsearch5.6 Mappings 映射

    博客地址:http://www.moonxy.com 一.前言 关系型数据库对我们来说都很熟悉,Elasticsearch 也可以看成是一种数据库,所以我们经常将关系型数据库中的概念和 Elastic ...

  2. 控制执行流程之ForEach语法

    1.定义 : 一种更加简洁的for语法,用于数组和容器===>>>foreach,无需创建int类型变量对被访问项构建的序列进行计数. 2.经典应用:  对于数组的初始化,如果选用f ...

  3. Netty源码分析 （十一）----- 拆包器之LengthFieldBasedFrameDecoder

    本篇文章主要是介绍使用LengthFieldBasedFrameDecoder解码器自定义协议.通常,协议的格式如下: LengthFieldBasedFrameDecoder是netty解决拆包粘包 ...

  4. svn新建文件不能提交的解决方法

    svn新建文件不能提交的解决方法 在当前新建文件的目录下,右键空白处: 选择Properties 找到所有有ignore字眼的属性,查看这个属性的继承目录(inherited from),入我的是cl ...

  5. 使用Storm进行词频统计

    词频统计 1.需求:读取指定目录的数据,并且实现单词计数功能 2.实现方案: Spout用于读取指定文件夹(目录),读取文件,将文件的每一行发射到Bolt SplitBolt用于接收Spout发射过来 ...

  6. JIRA集成GitHub

    原因: 作为管理员, 为用户提高效率的角度,配置测试此服务.让用户从JIRA内看到代码分支,提交信息,pull requests等等, 让Github的代码提交记录和JIRA的任务管理系统集成在一起, ...

  7. Redis数据库之数据基本管理操作

    了解并掌握各种数据类型的命令操作方式,以及各种数据类型值的操作方式.同时,熟练记忆列表.哈希.集合和有序集合等数据类型的常用操作命令.能根据指令格式完成相应的指令操作. ①string数据类型的练习 ...

  8. SpringBootSecurity学习（10）网页版登录之记住我功能

    场景 很多登录都有记住我这个功能,在用户登陆一次以后,系统会记住用户一段时间,在这段时间,用户不用反复登陆就可以使用我们的系统.记住用户功能的基本原理如下图: 用户登录的时候,请求发送给过滤器User ...

  9. java几个常见的基础错误

    1.String 相等 稍微有点经验的程序员都会用equals比较而不是用 ==,但用equals就真的安全了吗,看下面的代码 user.getName().equals("xiaoming ...

  10. YiShaAdmin，基于.NET Core Web开源的后台快速开发框架

    YiShaAdmin YiShaAdmin 基于.NET Core Web开发,借鉴了很多开源项目的优点,让你开发Web管理系统和移动端Api更简单,所以我也把她开源了. 她可以用于所有的Web应用程 ...