要写一个小项目,tabbar要重用因而独立出组件,遇到不少坑,赶紧记录下来:
<template> <div class="tab"> <div class="tabItem"> <router-link class="tabTo" to="/"> <img class="tabImg" src="static/home.png"> <div class="tabText">首页</div> </router-link> <router-link class="tabTo" to="/notice"> <img class="tabImg" src="static/home.png"> <div class="tabText">通知</div> </router-link> <router-link class="tabTo" to="/my"> <img class="tabImg" src="static/home.png"> <div class="tabText">我的</div> </router-link> </div> </div> </template>
先把页面代码写出来,之后把变量提出来:
<template> <div class="tab"> <div v-for="item in tabData" :key="item.name" class="tabItem"> <router-link class="tabTo" :to="item.path"> <img class="tabImg" :src="item.img"> <div class="tabText">{{item.name}}</div> </router-link> </div> </div> </template>
tabData: [ { path: '/', img: 'static/home.png', name: '首页' }, { path: '/notice', img: 'static/notice.png', name: '通知' }, { path: '/my', img: 'static/my.png', name: '我的' } ]
,变量提出来以后,点击肯定要有效果的比如字体变色,背景图片变换。增加了一个class(.active),数组各增加一张点击后的背景图片
tabData: [
{
path: '/',
img: 'static/home.png',
activeImg: 'static/homeActive.png',
name: '首页'
},
{
path: '/notice',
img: 'static/notice.png',
activeImg: 'static/noticeActive.png',
name: '通知'
},
{
path: '/my',
img: 'static/my.png',
activeImg: 'static/myActive.png',
name: '我的'
}
]
之后就要实现切换的效果了,照我预想是点击包裹图片和文字的容器,点击后,根据点击的下标知道点击哪一个,更换背景,增加class:active,顺便把点击和路由跳转写一起了,
<template> <div class="tab"> <ul v-for="(item, imdex) in tabData" :key="item.name" class="tabItem"> <li class="tabTo" @click="tabClick(item.path,index)"> <img class="tabImg" :src="activeIndex== index?item.activeImg:item.img"> <div :class="{'active':activeIndex== index}" class="tabText">{{item.name}}</div> </li> </ul> </div> </template>
export default { name: 'TabBar', data: function () { return { activeIndex: 0, tabData: [ { path: '/', img: 'static/home.png', activeImg: 'static/homeActive.png', name: '首页' }, { path: '/notice', img: 'static/notice.png', activeImg: 'static/noticeActive.png', name: '通知' }, { path: '/my', img: 'static/my.png', activeImg: 'static/myActive.png', name: '我的' } ] } }, methods: { tabClick: function (path,index) { this.activeIndex=index this.$router.push(path) } } }
逻辑没问题吧,一运行就傻了,点击以后只有字会变颜色,再次点击才会背景图片才会变色,左改又改还是不行,很多文章都说是这个思路啊,微信小程序也是这个思路啊。经人提醒把根据下标切换状态,改成根据路由变化更改状态,竟然解决了,虽然有点不求甚解,先记录下来咯,最后变成了这样
<template> <div class="tab"> <ul v-for="item in tabData" :key="item.name" class="tabItem"> <li class="tabTo" @click="tabClick(item.path)"> <img class="tabImg" :src="item.path== $route.path?item.activeImg:item.img"> <div :class="{'active':item.path== $route.path}" class="tabText">{{item.name}}</div> </li> </ul> </div> </template>
export default { name: 'TabBar', data: function () { return { tabData: [ { path: '/', img: 'static/home.png', activeImg: 'static/homeActive.png', name: '首页' }, { path: '/notice', img: 'static/notice.png', activeImg: 'static/noticeActive.png', name: '通知' }, { path: '/my', img: 'static/my.png', activeImg: 'static/myActive.png', name: '我的' } ] } }, methods: { tabClick: function (path) { this.$router.push({path: '.' + path}) } } } </script>
最后效果