Vue实现固定定位图标滑动隐藏效果

写在前面

移动端页面，有时候会出现一些固定定位在底部图标，比如购物车等。这时候如果添加一个滑动页面，图标透明度变低，同时移动到屏幕边进行隐藏，效果如下。

所用原理

监听滑动事件，每次进行滑动时，触发动画，添加定时器，1.4s后显示该图标。具体代码如下：

模板节类=' fixed-icon ' : style=' { bottom : bottom ' rem ' } ' : class='[！过渡？固定过渡' : ' ']' @ click=' event '槽/槽/节/模板脚本导出默认值{ name: 'fixedIcon '，prop : { bottom : {//改图标距离底部距离单位rem type: Number，default: 3，}，}，data(){ return { transit : true，//是否触发动画定时器：为空，//定时器};}，methods: { event() { this .$ emit(' ClickEvent ')；//绑定点击图表时间}，handleScroll () { //每次滑动都会执行函数this . transition=false if(this . timer){//判断是否已存在定时器清除超时(这。计时器)；} this.timer=setTimeout(()={ //创建定时器，1.4s后图标回归原位置this.transition=true}，1400)；} },挂载(){ window。addeventlistener(' scroll '，这。handlescroll)；//监听页面滑动} };/scriptstyle作用域lang=' SCS '/* @仅限媒体屏幕和(最小宽度：750像素){ html { font-size :20像素} } */.固定图标{位置：固定；z指数： 1100；right : 1.7 remdisplay : flex justice-内容中心：align-items:居中；高度： 4.1毫米；宽度： 4.1毫米；边界半径： 50%;背景-color: rgba(128，128，128，0.8)；时差：0.7秒轻松进出；} .固定过渡{右：-2.05雷姆；opa city 3360 0.4 transition : 1s易于取出；}/样式引入代码如下：

模板节类=' content ' fixed-icon : bottom=' 3 ' @ ClickEvent=' chat ' I class=' icon-chat '/I/fixed-icon/section/template script import fixed ion from ' ./components/FixeDicon。vue '；导出默认{ name: 'test '，components: { fixedIcon }，data(){ return }；}，methods: { chat() { //图标点击事件console.log('你好');}，}，mounted() { document.title='Vue制作固定定位图标滑动隐藏效果；}, };/scriptstyle作用域为lang="SCS ".内容{ height: 200vh}。icon-chat { width : 2 rem；高度： 1.9雷姆；背景： URL(' http://pfpdwbdfy。bkt。云dn。com/image/test/fixedicontranting/微信。png ')无重复；背景尺寸size : 2 rem 1.9 rem }/style github代码

总结

以上所述是小编给大家介绍的某视频剪辑软件实现固定定位图标滑动隐藏效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！