【五种 自定义tabbar导航demo】使用场景：
例如：适用于app、微信小程序、H5的自定义底部导航 ，5种动态切换
问题描述
大部分小程序底部导航都是用原生的来写，但是如果遇到难缠的甲方，要各式各样的底部导航，这时候就不得不写自定义导航 。但是 平时还是推荐用官方的底部导航，加载快，很少出bug，处理好的生命周期 。
文章插图
{{item.text}}>import atPage1 from '@/components/at-page/at-page1.vue';import atPage2 from '@/components/at-page/at-page2.vue';import atPage3 from '@/components/at-page/at-page3.vue';import atPage4 from '@/components/at-page/at-page4.vue';import atPage5 from '@/components/at-page/at-page5.vue';export default {// 翻滚切换方式name: "atTabBarRoll",props: {// 固定底部fixedBottom: {type: Boolean,default: true}},components: {"at-page1":atPage1,"at-page2":atPage2, "at-page3":atPage3, 'at-page4':atPage4, "at-page5":atPage5, },data() {return {prevIndex: -1,current: 0,tabList: [{"icon": "../../static/tabbar/home_no.png","iconSelected": "../../static/tabbar/home.png","text": "首页"},{"icon": "../../static/tabbar/order_no.png","iconSelected": "../../static/tabbar/home.png","text": "翻滚1"},{"icon": "../../static/tabbar/order_no.png","iconSelected": "../../static/tabbar/home.png","text": "翻滚2"},{"icon": "../../static/tabbar/store_no.png","iconSelected": "../../static/tabbar/home.png","text": "翻滚3"},{"icon": "../../static/tabbar/my_no.png","iconSelected": "../../static/tabbar/home.png","text": "翻滚4"},],};},methods: {change(index) {console.log(index);let that = this;if (that.current == index) return;that.prevIndex = that.current;that.current = index;if (that.current == 0) {that.$refs.page1.ontrueGetList();} else if (that.current == 1) {that.$refs.page2.ontrueGetList();} else if (that.current == 2) {that.$refs.page3.ontrueGetList();} else if (that.current == 3) {that.$refs.page4.ontrueGetList();} else if (that.current == 4) {that.$refs.page5.ontrueGetList();}}}}="scss" scoped>@import "./at-flex.scss";@import "./tab-bar.scss";.module{display: flex;align-items: center;justify-content: center;// background: pink;}.at-tab-bar {padding: 30rpx 0 0;width: 100%;height: 160rpx;position: fixed;bottom: 0;left: 0;background-color: #82a9f2;.item {height: 100rpx;position: relative;overflow: hidden;>view {height: 200%;>view {height: 50%;color: #0043e3;font-size: 30rpx;}}&.active {&::before {content: '';display: block;position: absolute;width: 90rpx;height: 90rpx;box-sizing: border-box;border-color: #0043e3;border-style: solid;border-width: 2px;border-radius: 50%;top: 5rpx;left: 50%;margin-left: -45rpx;z-index: 1;animation: scale 0.3s ease 0s 1 normal;animation-fill-mode: forwards;}&::after {content: '';display: block;background-color: #0043e3;width: 4px;height: 4px;border-radius: 50%;position: absolute;bottom: 3px;left: 50%;margin-left: -2px;z-index: 2;opacity: 0;animation: fide-in 0.5s ease 0.3s 1 normal;animation-fill-mode: forwards;}>view {animation: translate 0.4s ease 0.3s 1 normal;// transform:translateY(-100rpx);animation-fill-mode: forwards;}}&.recover {>view {animation: recover 0.3s ease 0s 1 normal;}}}}// 恢复默认@keyframes recover {from {transform: translateY(-100rpx);}to {transform: translateY(0);}}// 转换移动@keyframes translate {from {transform: translateY(0);}to {transform: translateY(-100rpx);}}// 圆圈缩放@keyframes scale {0% {transform: scale(0, 0);opacity: 0;border-width: 2px;}50% {opacity: 0.5;border-width: 5px;}100% {transform: scale(0.95, 0.95);opacity: 0;border-width: 0px;}}// 淡入@keyframes fide-in {from {transform: scale(0, 0);opacity: 0;}to {transform: scale(1, 1);opacity: 1;}}
最后：
如果你看不太懂，没关系，附上个人gitee 项目地址:
如果文章对你帮助，请点个赞支持一下 。
