smartmeter-app/components/tab-bar/tab-bar.vue

54 lines
1.3 KiB
Vue
Raw Normal View History

<template>
<view>
<view class="u-page">
<!-- 所有内容的容器 -->
</view>
<!-- 与包裹页面所有内容的元素u-page同级且在它的下方 -->
<u-tabbar v-model="current" :list="list" icon-size='40rpx' active-color='#3996fd' inactive-color="#c8c7cb"></u-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{
iconPath: require('@/static/tabbar/home.png'),
selectedIconPath:require('@/static/tabbar/home-active.png'),
text: '首页',
customIcon: true,
pagePath:'/pages/index/index2'
},
{
iconPath: require('@/static/tabbar/tiku.png'),
selectedIconPath:require('@/static/tabbar/tiku-act.png'),
text: '班级',
customIcon: true,
pagePath:'/pages/home/home'
}
,{
iconPath: require('@/static/tabbar/my.png'),
selectedIconPath:require('@/static/tabbar/my-active.png'),
text: '我的',
customIcon: true,
pagePath:'/pages/user/usertwo'
},
],
current: 0
}
},
}
</script>
<style lang="scss" scoped>
/deep/.u-tabbar__content__item__button{
top: 20rpx !important;
}
/deep/.u-tabbar {
.u-tabbar__content__item:nth-child(2) {
.u-tabbar__content__item__button {
width: 32rpx !important;
}
}
}
</style>