欢迎来到Introzo百科
Introzo百科
如何实现小程序tab栏下划线动画效果
本文主要介绍了如何实现小程序tab栏下划线动画效果,分享给大家,具体如下:
最终效果
实现
wxml
{{item}}
wxss
.abox{ display: flex; flex-direction: row; width: 100%; justify-content: space-around; position: relative; padding-bottom: 20rpx; } .tabTrue{ color: red; } .b{ background: red; height: 4rpx; width:64rpx; position: absolute; bottom: 0; transition: all .3s linear; }
js
Page({ data: { title: ["首页","掘金","思否","知乎"], currentIndex:"0", left:"" }, changeTab:function(e){ //console.log(e) this.setData({ currentIndex: e.currentTarget.dataset.aa }) this.changeline(e) }, changeline:function(){ const query = wx.createSelectorQuery() var _this = this www.introzo.com('.tabTrue').boundingClientRect() query.exec(function (res) { _this.setData({ left: res[0].left }) //console.log(res[0].left) }) }, onLoad: function () { this.changeline(1) } })
上面代码可以实现效果,这里面最重要的就是通过 changeTab方法获取有tabtrue这个class的标签,获取到标签的left值。
相关文章
- 10-06 Python Joblib库使用方法总结
- 10-06 Python标准类库
- 10-06 Java Maven 设置配置参考
- 10-05 戈多的场景树
- 10-05 戈多动画
- 10-05 在 Godot 中设计标题画面
- 10-05 信息搜索和可视化
- 10-05 设计流程与任务分析
- 10-05 颤动警报对话框
- 10-05 PostgreSQL远程连接配置管理/账号密码分配
- 10-05 Windows server 创建FTP 包括ft
- 10-05 Mongodb副本集加分片集群安全认证使用账号密码
- 10-05 浅谈ubuntu中执行.sh文件的几种方式的区别
- 10-05 Linux性能优化的实用思路和技巧(linux性能
- 10-05 如何轻松安装Linux系统显卡驱动(Linux安装
- 10-05 win10动态锁设置教程
- 10-05 win10关闭Win10右下角提示的教程
- 10-05 win10设置定时提醒闹钟方法
- 10-05 win10音频服务未运行 错误1068怎么办
- 10-05 win10哪里下载
- 最近发表