vue tabBar导航栏设计实现4-再次抽取MainTabBar
系列导航
二、vue tabBar导航栏设计实现2-抽取tab-bar
三、vue tabBar导航栏设计实现3-进一步抽取tab-item
四、vue tabBar导航栏设计实现4-再次抽取MainTabBar
tabBar导航栏设计4-再次抽取MainTabBar
一、 本节目标效果
上一个节的例子中App.vue中代码量还是很大如何简化App.vue,再次抽取一个MainTabBar组件负责在TabBarItem里放数据
二、代码结构
注：主要是标红的几个文件
三、代码
App.vue
<template>
<div id="listStyle" >
<div id="dayCount">
今日点击:99999 | 今日发布:2000 | 今日下载:1000
</div>
<List border header="资源信息" size="large" >
<ListItem v-for="(item, index) in resourcesList">
<ListItemMeta :avatar="getImgUrl(item.iconPath)" :title="item.title" :description="item.resourcesDesc" />
<template slot="action">
<li>
<Icon type="ios-star-outline" /> {{item.perfectTimes}}
</li>
<li>
<Icon type="ios-thumbs-up-outline" />{{item.goodTimes}}
</li>
<li>
<Icon type="ios-chatbubbles-outline" /> {{item.badTimes}}
</li>
</template>
</ListItem>
<Page id="page" :total="pageTotal" :current="pageNum" :page-size="pageSize" @on-change="handlePage" show-total show-elevator next-text="下一页"/>
</list>
</div>
</template>
<script>
import {getXyResourcesInfoV} from '@/network/index.js';
//分页的初始参数
const paramter = {
page: 1,
pagesize:4,
ispage:'Y'
};
export default {
name: "MainList",
props: {
},
data() {
return {
resourcesList: [] ,
pageTotal: 0,
pageNum: 1,
pageSize: 10,
}
},
created() {
this.dataListInit();
},
computed: {
},
methods: {
//页面变更
handlePage(value) {
console.log('value:'+value);
this.pageNum = value;
paramter.page = value;
this.dataListInit()
},
dataListInit() {
getXyResourcesInfoV(paramter).then(res => {
//debugger
this.pageTotal = res.data.page.count;
this.pageSize = res.data.page.pagesize;
this.pageNum = res.data.page.page;
this.resourcesList = [];
for (var i = 0; i < res.data.obj.dataList.length; i++) {
this.resourcesList.push({
resourcesId: res.data.obj.dataList[i].resourcesId,
title: res.data.obj.dataList[i].title,
resourcesDesc:res.data.obj.dataList[i].resourcesDesc,
perfectTimes:res.data.obj.dataList[i].perfectTimes,
goodTimes:res.data.obj.dataList[i].goodTimes,
badTimes:res.data.obj.dataList[i].badTimes,
iconPath:res.data.obj.dataList[i].iconPath
})
}
})
.catch(error => {});
},
itemClick() {
this.$router.replace(this.path)
},
// 动态获取头像图片
getImgUrl(picName) {
//默认图标
//debugger
if( picName == 'init' ){
return require("@/assets/image/element/headPhoto/1.png");
}else{
//base64图标
return picName;
}
}
}
}
</script>
<style lang="scss">
#dayCount {
height: 30px; //设置高度
font-size: 15px; //设置字体大小
color: #2d8cf0;
// position: relative;
font-family: "PingFang SC";
padding: 7px
}
#page{
//float:right
text-align:right
}
</style>
TabBar.vue
<template>
<div id="tab-bar">
<slot></slot>
</div>
</template>
<script>
import {defineComponent} from 'vue'
export default defineComponent({
//组件名称
name:'TabBar',
//接收父组件的数据
props:{
},
components: {
},
setup(props,ctx){
return{
}
}
})
</script>
<style lang="scss">
#tab-bar {
display: flex;
background-color: #f6f6f6;
position: fixed;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 -1px 1px rgba(100,100,100,.2);
}
</style>
TabBarItem.vue
<template>
<div class="tab-bar-item">
<slot name="item-icon"></slot>
<slot name="item-text"></slot>
</div>
</template>
<script>
import {defineComponent} from 'vue'
export default defineComponent({
//组件名称
name:'TabBarItem',
//接收父组件的数据
props:{
},
components: {
},
setup(props,ctx){
return{
}
}
})
</script>
<style lang="scss">
.tab-bar-item {
flex: 1;
text-align: center;
height: 49px;
font-size: 14px;
}
.tab-bar-item img {
width: 24px;
height: 24px;
margin-top: 3px;
vertical-align: middle;
margin-bottom: 2px;
}
</style>
MainTabBar.vue
<template>
<tab-bar>
<tab-bar-item path="/">
<template v-slot:item-icon>
<img :src="require('../../assets/img/tabbar/home.svg')">
</template>
<template v-slot:item-icon-active>
<img :src="require('../../assets/img/tabbar/home_active.svg')">
</template>
<template v-slot:item-text>
<div slot="item-text">首页</div>
</template>
</tab-bar-item>
<tab-bar-item path="/category">
<template v-slot:item-icon>
<img :src="require('../../assets/img/tabbar/category.svg')">
</template>
<template v-slot:item-icon-active>
<img :src="require('../../assets/img/tabbar/category_active.svg')">
</template>
<template v-slot:item-text>
<div slot="item-text">分类</div>
</template>
</tab-bar-item>
<tab-bar-item path="/cart">
<template v-slot:item-icon>
<img :src="require('../../assets/img/tabbar/shopcart.svg')">
</template>
<template v-slot:item-icon-active>
<img :src="require('../../assets/img/tabbar/shopcart_active.svg')">
</template>
<template v-slot:item-text>
<div slot="item-text">购物车</div>
</template>
</tab-bar-item>
<tab-bar-item path="/profile">
<template v-slot:item-icon>
<img :src="require('../../assets/img/tabbar/profile.svg')">
</template>
<template v-slot:item-icon-active>
<img :src="require('../../assets/img/tabbar/profile_active.svg')">
</template>
<template v-slot:item-text>
<div slot="item-text">我的</div>
</template>
</tab-bar-item>
</tab-bar>
</template>
<script>
import TabBar from '../tabbar/TabBar'
import TabBarItem from '../tabbar/TabBarItem'
export default {
name: "MainTabBar",
components: {
TabBar,
TabBarItem
}
}
</script>
<style scoped>
</style>
index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Category from '../views/Category.vue'
import Cart from '../views/Cart.vue'
import Profile from '../views/Profile.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
} ,
{
path: '/category',
component: Category
},
{
path: '/cart',
component: Cart
},
{
path: '/profile',
component: Profile
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
其他一些代码不很简单看之前的博客内容
四、代码按照步骤解释
1、 抽取MainTabBar.vue组件
MainTabBar.vue组件里调用TabBar.vue和TabBarItem.vue组件，并且将数据放到MainTabBar.vue组件里。
2、TabBarItem.vue组件里增加itemClick方法负责页面跳转 ，跳转的地址由MainTabBar.vu中的tab-bar-item 组件的path属性动态传递过来。
3、 index.js中配置路由
4、App.vue中调用MainTabBar.vue组件，注意这里一定要加一个<router-view>标签要不路径跳转没有占位符就不会有效果。
