vue 页面滚动到原位置
哈哈哈,昨天登QQ的时候,意外发现有人看了我写的博客,居然还加了我,这就激起了我内心的小波澜啊
公司最近在做电商,用的前端框架依然是VUE
矩MAX(微信公众号)可以搜的到哦,安卓商店或苹果AppStore也可以搜的到
回归中体哈,说一下今天做的领券中心
有点类似于京东的领券中心,刚测试完,券全被我领啦
效果就是点击立即领取,文字变为立即使用、弹出领取成功
但是因为接口不是实时的,所以我没有通过接口数据判断让用户点击领取的同时,让优惠券改变状态
但是,毛爷爷说过:办法总比困难多~
当领取成功后,页面会重新走一遍获取优惠券的接口
所以 我写了一个时间函数setTimeout
通过this.$el.querySelector("#coupon_list").children[this.currentNum].offsetTop获取当前 点击的元素的offsetTop值
当领取成功之后,页面回跳至 该元素的原位置
vue中,在不方便使用ref来改变的时候咱们可以通过原生js来修改元素的属性样式
嗯 好吧 ,就说这些废话吧
我是菜鸟
如果你觉得我写的很垃圾,欢迎批评指正
vue 页面滚动到原位置的更多相关文章
- 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏
设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...
- 微信小程序(13)--页面滚动到某个位置添加类效果
微信小程序页面滚动到某个位置添加类,盒子置顶效果. <!-- vh,是指CSS中相对长度单位,表示相对视口高度(Viewport Height),1vh = % * 视口高度 --> &l ...
- 【特效】页面滚动到相应位置运行css3动画
请到我的个人博客网站上浏览此文章,欢迎评论和建议. 文章链接:http://www.xiaoxianworld.com/archives/87 现在css3动画很常见了,实际项目中经常应用,特别是那种 ...
- js 页面滚动到指定位置
当页面的长度比较长时,如果进行刷新页面,我们希望能够在刷新完成页面之后,能够停留在当前位置,而不是从头再手动滚动到当前位置. 那么这样的效果如何实现呢?下面开始简单描写(由于博客园不支持效果展示,所以 ...
- 每天一点点之 uni-app 框架开发 - 页面滚动到指定位置
项目需求:在页面中,不管位于何处,点击评论按钮页面滚动到对应到位置 实现思路如下: uni.createSelectorQuery().select(".comment").bou ...
- 微信小程序页面滚动到指定位置
页面上有一个元素或者组件,id 为 comment 则: var me = this; var query = wx.createSelectorQuery().in(me); query.selec ...
- vue+vux页面滚动定位(支持上下滑动)
接上篇文章:https://www.cnblogs.com/ligulalei/p/10622778.html在上篇文章中实现了通过使用scrollIntoView()在使用vux的移动端实现了点击锚 ...
- ASP.Net页面刷新后自动滚动到原来位置
在网上搜索之后总结了三种方式: 1.设置Page中的MaintainScrollPositionOnPostback属性为true A>.页面里有MaintainScrollPositionOn ...
- js实现一个长页面中的图片懒加载即滚动到其位置才加载
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- 松软科技课堂:SQL--RIGHTJOIN关键字
发布时间:2019/3/15 9:27:31 SQL RIGHT JOIN 关键字 RIGHT JOIN 关键字会右表 (table_name2) 那里返回所有的行,即使在左表 (table_name ...
- python里面的xlrd模块详解
那我就一下面积个问题对xlrd模块进行学习一下: 1.什么是xlrd模块? 2.为什么使用xlrd模块? 3.怎样使用xlrd模块? 1.什么是xlrd模块? ♦python操作excel主要用到xl ...
- 01.Django基础一之web框架的本质
一 web框架的本质及自定义web框架 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端,基于请求做出响应,客户都先请求,服务端做出对应的响 ...
- 使用spring拦截器实现日志管理
使用HandlerInterceptor拦截器,可以拦截请求,实现通用的日志管理操作 一.添加拦截器类 在"src/main/java"代码文件夹的"org.xs.dem ...
- Exceptionless 5.0.0 本地Docker快速部署介绍
在之前我有专门写两篇文章介绍过Exceptionless这款开源日志项目的使用和部署,但是当时是基于4.1.0版本(2017年的release),时隔两年多Exceptionless也推出了5.0.0 ...
- css实现斜角效果
重点代码: 使用一张图片盖住div,实现斜角效果 .triangle { position: absolute; top:; left:; width: 36px; height: 36px; bac ...
- Spring只定义接口自动代理接口实现类
能够扫描到包 @ComponentScan("org.zxp.esclientrhl") ESCRegistrar类主要实现ImportBeanDefinitionRegistra ...
- VR应用评测 - Apollo 11 阿波罗11号
Apollo 11 VR http://store.steampowered.com/app/457860/Apollo_11_VR/ Steam VR 2016年发布 好评率 50% 基于美国航空航 ...
- Scala 学习笔记之函数(1)
class Student { val mySayHello1: String => Unit = sayHello val mySayHello2: (String, Int) => U ...
- MySQL8安装及使用当中的一些注意事项
前言 这两天构建新项目,在本地安装的mysql8(本地环境windows),期间忘了密码,又卸载重装了一番,然后捣鼓了一顿授权给别人访问,最后磕磕绊绊的搞好了,下面是在这过程中遇到的问题及解决办法小结 ...