Vue实现侧边固定定位图标滑动隐藏

移动端页面，有时候会出现一些固定定位在底部图标，比如领取购物券联系客服等。这时候如果滑动页面，图标透明度变低，同时移动到屏幕侧边进行隐藏，效果如下。

监听滑动事件，每次滑动时，触发动画。添加定时器，1s后显示该图标

<template><div class="concat-common" :class="[ !transition ? 'fixed-transition' : '']"><div class="coupon" @click="getCoupon()">5.1-5.5<br />点击<br />领取<br />优惠卷</div><div class="concat-wrapper van-hairline--surround" @click="concatCustomer"><p>联系客服</p></div></div>
</template><script>
import { openConcatDialog, getCoupons } from '@/utils/common.js'
export default {name: 'concat',components: {},data () {return {transition: true, // 是否触发动画timer: null, // 定时器}},mounted () {window.addEventListener('scroll', this.handleScroll) // 监听页面滑动},methods: {handleScroll () { // 每次滑动都会执行函数this.transition = falseif (this.timer) { // 判断是否已存在定时器clearTimeout(this.timer)}this.timer = setTimeout(() => { // 创建定时器，1s后图标回归原位置this.transition = true}, 1000)},concatCustomer () {openConcatDialog()},getCoupon () {let couponId = this.couponInfo.couponIdgetCoupons(couponId)}},computed: {couponInfo () {return JSON.parse(localStorage.getItem('couponInfo'))}}
}
</script><style lang="less" scoped>
@background: #f3f3f3;
.concat-common {width: 40px;position: fixed;right: 20px;bottom: 90px;z-index: 10;transition: all 1s;&.fixed-transition {right: -2rem;opacity: 0.4;}.concat-wrapper {display: flex;align-items: center;width: 100%;height: 40px;background: rgba(255, 255, 255, 0.8);border-radius: 50%;text-align: center;font-size: 12px;&.van-hairline--surround::after {border-radius: 50%;border-color: #000;}p {width: 80%;margin: 5px auto;line-height: 14px;}}.coupon {padding: 4px 0;border-radius: 6px;text-align: center;color: #fff;font-size: 12px;background: #a71f24;margin-bottom: 4px;}
}
</style>

Vue实现侧边固定定位图标滑动隐藏相关推荐

Vue实现点击按钮上下滑动隐藏或展示查询条件
如图中的是jquery实现的,那么在vue中如何实现呢? 结合自己的项目进行了整合,具体的额模块代码如下所示: 第一步新建组件js 建个JS文件,随便取个名字,把下面的js复制进去,我这里叫moreS ...
css中侧边导航栏怎么隐藏,CSS3手机侧边导航栏滑动隐藏特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: 共4种CSS3手机侧边导航栏滑动隐藏特效 1.默认的点击滑动侧边栏菜单效果. 2.带3D transforms的滑 ...
标题滑动隐藏，滑动中背景图标变化，仿淘宝商祥
先申明菜鸟一枚,有不对的地方欢迎大神指正.编辑的主要目的是记录下最近做的一些效果.仿淘宝商祥标题下拉滑动时的渐变,滑到详情时详情的标题栏固定不动由详情的内容继续滑动.效果如图: 先分两个部分一是滑动的 ...
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题参考文章: (1)解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题 (2)https://www.cnblogs.com/zlfP ...
IDEA学习笔记——文件资源定位图标。小齿轮的显示和隐藏（Autoscroll from Source）
在使用IDEA的时候,因为误操作,将资源定位的小图标整没了,没有头绪,在网上搜索,找了几轮都没有找到,后来自己耐下心来复盘自己的操作,终于发现了,显示或隐藏它的功能是哪个了.在project栏上的设置 ...
vue 固定div 滚动_vue移动端导航吸顶（固定定位）页面滚动出现抖动
1-在页面中监听了滚动条,滚动到310px就固定定位了,添加类名的方式 handleScroll () { var scrollTop = window.pageYOffset || document ...
vue实现侧边折叠菜单栏手风琴效果
在我们做管理后台亦或是产品流程时,总是需要一个菜单栏或者导航栏来架起我们的产品架构,那么,如何用vue实现侧边折叠导航栏呢?接下来将一一介绍. 请先看效果演示图. 步骤1:先架构整个页面的布局,撰写h ...
bootstrap(手风琴、图片轮换和固定定位)
手风琴(Collapse) Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果.点击标题,可以让其对应的内容显示或隐藏 <div class="pan ...
css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
绝对定位,相对定位,固定定位和粘性定位的特性及区别,我整理一下放在文章最下面了,不用死记硬背,理解一下就ok,需要的话可以看看. 当导航栏头部没有别的模块时,想要滑动过程中导航栏一直在顶部,有两种写法 ...
【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )
文章目录一.Banner 栏样式及核心要点 1.实现效果 2.核心要点分析二.完整代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果一.Banner 栏样式及核心要点 1.实现效果 ...

Vue实现侧边固定定位图标滑动隐藏

Vue实现侧边固定定位图标滑动隐藏相关推荐

最新文章

热门文章

Vue实现 侧边固定定位图标 滑动隐藏

Vue实现 侧边固定定位图标 滑动隐藏相关推荐

最新文章

热门文章

Vue实现侧边固定定位图标滑动隐藏

Vue实现侧边固定定位图标滑动隐藏相关推荐