哈哈哈，昨天登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. charles 启用/禁用断点

    本文参考:charles 启用/禁用断点 1.3. enable/disable breakpoints 和 2.3 breakpoints settings 断点设置是常用的了,没啥好说的了,可以设 ...

  2. 控制执行流程之switch语句

    switch语句,同时也是一种选择性语句,其根据整数表达式的值(整数选择因子)选择一段代码去执行.整数选择因子为int类型或者char类型.

  3. Quartz Version=3.0.4.0,Culture=neutral,PublickeyToken=f6b8c98a402cc8a4或它的一个依赖项。找到的程序集清单定义与程序集引用不匹配

    报这种错误,就是比对Quartz的版本 ,右击引用的dll,属性查看版本. 一个项目中要一样  或者接口和调用接口的要一样  . 思路:解决这种问题的思路就是比对版本号.有可能是其它的dll,但是思路 ...

  4. CDH集群安装

    1 软硬件准备 1.1 准备三个节点 序号 主机名 内存 CPU IP地址 角色 1 cdh1 8G 8核心 192.168.5.78 cloudera-scm-server,mysql 2 cdh2 ...

  5. vscode Springboot 启动debug报错：Build failed, do you want to continue?

    一,前言 vscode我感觉是一个特别好用的开发工具,我根据文章https://www.cnblogs.com/WangBoBlog/p/9464281.html去搭建一个简单的springboot工 ...

  6. 从壹开始学习 NetCore 新篇章 ║ Blog.Core 开发社之招募计划书

    宫 哈喽大家好,国庆马上就要来了,在新的第四季度来临之际,祝大家年末能顺顺利利,解决所有的难题.大家可能从我的标题里也能看的出来,老张又要耍花样,搞事情了,近来随着 netcore 3.0 的正式推出 ...

  7. Spring 梳理 - 视图解析器 VS 视图（View，ViewResolver）

    View View接口表示一个响应给用户的视图,例如jsp文件,pdf文件,html文件等 该接口只有两个方法定义,分别表明该视图的ContentType和如何被渲染 Spring中提供了丰富的视图支 ...

  8. rpm -qa|grep nfs >/dev/null 2>&1作用

    在使用一些shell命令是,经常会用到rpm -qa|grep nfs >/dev/null 2>&1之类的命令,该命令干嘛用的呢? 其实这个命令就是将rpm -qa|grep n ...

  9. wdcp 开启某个Mysql数据库远程访问

    wdcp 开启某个Mysql数据库远程访问 登录wdcp后台-Mysql管理-phpmyadmin 输入Mysql的root密码登录进入 示例代码: update mysql.user set hos ...

  10. Spring Boot 2.X(五)：MyBatis 多数据源配置

    前言 MyBatis 多数据源配置,最近在项目建设中,需要在原有系统上扩展一个新的业务模块,特意将数据库分库,以便减少复杂度.本文直接以简单的代码示例,如何对 MyBatis 多数据源配置. 准备 创 ...