哈哈哈，昨天登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. StringBulider类

    StringBulider类创建的字符串同样可以对字符串进行修改: public class StringBuliderDemo { public static void main(String[] ...

  2. charles 界面

    本文参考:charles 界面 没有用过,先留个记号,以后再来看 profiles contain a complete copy of all your configuration settings ...

  3. 使用 Envoy 和 AdGuard Home 阻挡烦人的广告

    原文链接:使用 Envoy 和 AdGuard Home 阻挡烦人的广告 通常我们使用网络时,宽带运营商会为我们分配一个 DNS 服务器.这个 DNS 通常是最快的,距离最近的服务器,但会有很多问题, ...

  4. 初学者-asp.net三层架构

    一.概述: 通常意义上的三层架构就是将整个业务应用划分为:表现层(UI).业务逻辑层(BLL).数据访问层(DAL).区分层次的目的即为了“高内聚,低耦合”的思想.是一种总体设计的思想. 1.表现层( ...

  5. Unity3D-游戏场景优化之遮挡剔除（Occlusion Culling）的使用

    在大型3D游戏场景中,如何优化游戏性能是非常重要的一步.一般遮挡剔除是非常常用的.接下来我们看看如何使用遮挡剔除. 假设这是一个游戏场景. 下面这是相机的视口,相机的视觉是看不到很大立方体后面的那些小 ...

  6. RabbitMQ的六种工作模式总结

    最近学习RabbitMQ的使用方式,记录下来,方便以后使用,也方便和大家共享,相互交流. RabbitMQ的六种工作模式: 1.Work queues2.Publish/subscribe3.Rout ...

  7. MySql错误处理--错误代码和消息

      附录B:错误代码和消息 目录 B.1. 服务器错误代码和消息 B.2. 客户端错误代码和消息 本章列出了当你用任何主机语言调用MySQL时可能出现的错误.首先列出了服务器错误消息.其次列出了客户端 ...

  8. 手把手教你搭建Pytest+Allure2.X环境详细教程，生成让你一见钟情的测试报告（非常详细，非常实用）

    简介 宏哥之前在做接口自动化的时候,用的测试报告是HTMLTestRunner,虽说自定义模板后能满足基本诉求,但是仍显得不够档次,高端,大气,遂想用其他优秀的report框架替换之.一次偶然的机会, ...

  9. Java之字符流读写文件、文件的拷贝

    字符流读数据 – 按单个字符读取 创建字符流读文件对象: Reader reader = new FileReader("readme.txt"); 调用方法读取数据: int d ...

  10. Dropout原理与实现

    Dropout是深度学习中的一种防止过拟合手段,在面试中也经常会被问到,因此有必要搞懂其原理. 1 Dropout的运作方式 在神经网络的训练过程中,对于一次迭代中的某一层神经网络,先随机选择中的一些 ...