哈哈哈，昨天登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. 安装完oracle11g_2x64位数据库后使用PL Developer链接oracle报错“请确认是否安装了32位oracle和TNS错误”解决方案

    解决使用PL Developer登录oracle报错没有配置TNS错误.首先安装好oracle11g数据库,安装PL developer32位 1,下载“instantclient-basic-win ...

  2. Spring Boot 入门之 Cache 篇（四）

    博客地址:http://www.moonxy.com 一.前言 Spring Cache 对 Cahce 进行了抽象,提供了 @Cacheable.@CachePut.@CacheEvict 等注解. ...

  3. Tomcat乱码

    日志乱码修改logging.properties文件中encoding=UTF-8 vim logging.properties encoding=utf-8 wq!保持退出,重启tomcat 乱码O ...

  4. 60 (OC)* 23中设计模式

    git设计模式

  5. API离线查看工具【包括！！所用常用！！开发语言的API】

    我相信对于每一个开发人员来说,都是不喜欢死记硬背API的,一些常用的方法或者接口我们是可以直接信手捏来的,或者说直接使用开发工具的自动代码提示,也能很快的找到自己想用的API,如果是自己从未使用过的, ...

  6. 阿里云安装zk并连接javaAPI测试

    1.安装 可参照Ubuntu 搭建Zookeeper服务进行安装并启动. 2.注意 阿里云环境开放2181端口 2.1 查看已开放端口: firewall-cmd --permanent --zone ...

  7. 获取配置文件中key=value

    之前一直是写一个方法获取配置文件中的key=value值得,现在提供更简单的. ResourceBundle 是java.utl中的一个专门针对.properties文件的. //获取配置文件对象 R ...

  8. webpack原理

    webpack早就已经在前端领域大放异彩,会使用和优化webpack也已经是中.高级工程师必备技能,在此基础之上再对webpack的原理进行理解和掌握,必定会在未来的开发中事半功倍.若是对于webpa ...

  9. 使用JavaScript·求数组的最大值和最小值

    前言  在数组中并没有提供arr.max()和arr.min()这样的方法.那么是不是可以通过别的方式实现类似这样的方法呢?那么今天我们就来整理取出数组中最大值和最小值的一些方法.   法一:其实利用 ...

  10. Java 学习笔记之 Daemon线程

    Daemon线程: 线程: 用户线程 守护线程 守护线程是一种特殊的线程,在进程中不存在非守护线程了,则守护线程自动销毁. public class DaemonThread extends Thre ...