标签：MainTabBar vue res tabBar 组件 import data
系列导航
二、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>标签要不路径跳转没有占位符就不会有效果。
标签：MainTabBar,vue,res,tabBar,组件,import,data 来源： https://www.cnblogs.com/yclh/p/15855313.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。