哈哈哈，昨天登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. 新建servlet工程

    1.选择新建Dynamic  Web Project 2.选择服务器和版本(2.5) 3.src目录下新建一个包 4.包里面新建一个类 5.实现Servlet接口(通过http协议访问) 6.serv ...

  2. Fragment的创建与通信

    由于这里涉及到接口回调的问题,所以先来看一看什么是接口回调: 这就好比老板和员工的微妙关系,老板需要员工去工作,员工挣钱了以后还要告诉老板自己挣了多少钱,然后由老板来处理这些钱. 首先创建一个接口: ...

  3. Linux 笔记 - 第十三章 Linux 系统日常管理之（一）系统状态监控

    博客地址:http://www.moonxy.com 一.前言 如果你是一名 Linux 运维人员,最主要的工作是优化系统配置,使应用在系统上以最优的状态运行.系统运行状态主要包括:系统负载.内存状态 ...

  4. Scala 系列（十三）—— 隐式转换和隐式参数

    一.隐式转换 1.1 使用隐式转换 隐式转换指的是以implicit关键字声明带有单个参数的转换函数,它将值从一种类型转换为另一种类型,以便使用之前类型所没有的功能.示例如下: // 普通人 clas ...

  5. 使用Spring中的PropertyPlaceholderConfigurer读取文件

    目录 一. 简介 二. XML 方式 三. Java 编码方式 一. 简介 大型项目中,我们往往会对我们的系统的配置信息进行统一管理,一般做法是将配置信息配置与一个cfg.properties 的文件 ...

  6. Skeleton with Assimp 骨骼动画解析

    Skeleton with Assimp 骨骼动画解析 骨骼动画是图形学中十分常见应用很广泛的一个技术,也是比较基础的内容,作为图形学的工程师需要将这一部分内容梳理清晰,主要关键在于几点:第一,分清楚 ...

  7. Spring boot 梳理 - 配置eclipse集成maven，并开发Spring boot hello

    @RestController @EnableAutoConfiguration public class App { @RequestMapping("/hello") publ ...

  8. @Data注解getset不起作用

    在idea的setting安装Lombok插件,重启idea

  9. Angular template ng-template/container/content

    1. ng-template 形式:<ng-template>...</ng-template> 默认ng-template中的内容会隐藏; 可通过[ngIf]来控制内容显示隐 ...

  10. Winows 2008远程桌面访问多用户设置

    一张图