uni-app自定义底部导航栏

 整体代码

<template>
	<view class="tabbar" :style="{paddingBottom:PaddingBottom}">
		<template v-for="(item,index) in list">
			<view class="pageList" @click="toNewPage(item.path)">
				<image :src="item.trueIcon" class="icon" v-if="pageIndex == index"></image>
				<image :src="item.icon" class="icon" v-else></image>
				
				<view class="pageName" :class="pageIndex == index ? 'nowPage':''">
					{
  {item.text}}
				</view>
			</view>
		</template>
	</view>
</template>

<script>
export default{
	props:{
		pageIndex:{
			type:Number,
			default:0
		}
	},
	data(){
		return{
			PaddingBottom:'0',
			list:[
				{
					text:'记账',
					icon:'/static/icon/bookkeep