自定义 Tabbar

Uniapp–>Tabbar的自定义抒写方式

我们从以下步骤来学习，不急。

创建common目录

在最外面新建一个common目录，用于不同个页面需要相同样式的组件，如tabbar，头部等

新建页面tabbar/my-tabbar.vue作组件

1，盒子类名.tabbar用于确定宽，位置–>
2，内套.tabbar-list用于在.tabbar内确定宽，外壳样式–>
3，套.tabbar-list-ul用于作为内容父级（flex）–>
4，.tabbar-list-li用于循环数组每一项–>
5，里面放上下盒子（一般是这样的样式）上图片，下文字

6，在data.return里定义一个数组list，或者先定义tabbar{}对象里面加个数组list[{}..{}]

<template>
	<view class="tabbar">
		<view class="tabbar-list">
			<view class="tabbar-list-ul">
				<view class="tabbar-list-li" v-for="(item,index) in tabBar.list" :key='index'>
					<view class="tabbar-list-li-icon">
						<image :src="item.iconPath" mode=""></image>
					</view>
					<view 'tabbar-list-li-text'">{{ item.text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tabBar:{
					list:[{
						pagePath:'/pages/index/index',
						iconPath:'默认图片',
						selectedIconPath:'被选择后的图片',
						text:'首页'
					},{
						pagePath:'/pages/链接名1/链接名1',
						iconPath:'默认图片',
						selectedIconPath:'被选择后的图片',
						text:'文字1'
					},{
						pagePath:'/pages/链接名2/链接名2',
					  iconPath:'默认图片',
						selectedIconPath:'被选择后的图片',
						text:'文字2'
					}]
				}
			}
		}
	}
</script>

pages创建相应tabbar文件

1，在pages新建相应tabbar对应文件页面；
2，记得勾选’在pages.json下注册’，也可以不勾自己写；
3，名字要跟你tabbar数组里一样名字。

在pages.json中添加内容

不用删掉pages里的东西

在pages同级加如下代码

"tabBar":{
		"custom":true, //开启自定义样式
		"list":[{
			"pagePath":"pages/index/index",
			"text":"首页"
		},{
			"pagePath":"pages/链接名1/链接名1",
			"text":"文字1"
		},{
			"pagePath":"pages/链接名2/链接名2",
			"text":"文字2"
		}]
	}

导入组件与父组件向子组件传值

1，在每个对应数组里的页面里导入相应组件并注册,使每个页面跳转都有Tabbar。
2.父是被导入组件的页面，子是导入的页面MyTabbar

3，父通过在data.return定义一个自定义名字1，并用’v-bind:自定义名字1=”自定义名字1”‘绑定数据给子传值，子通过’props:[‘自定义名字1’]接收（三个名字都相同用英语，如selected被选中，比较不会混）

//在对应数组里的页面里
<template>
	<view>
		<text>首页</text>
		<MyTabbar :selected='selected'></MyTabbar>
	</view>
</template>

<script>
	import MyTabbar from '@/common/tabbar/my-tabbar.vue'
	export default {
    data() {
			return {
				selected:0 //填数字，根据tabbar组件里的数组tabbar.list[第几个对象{}]比如首页是下标0。
			}
		},
		components:{
			MyTabbar
		}
	}
</script>

//在子组件
<script>
	export default{
    props:['selected'],
		data(){
			return{
				tabBar:{
					list:[{
						pagePath:'/pages/index/index',
						iconPath:'默认图片',
						selectedIconPath:'被选择后的图片',
						text:'首页'
					},{
						pagePath:'/pages/链接名1/链接名1',
						iconPath:'默认图片',
						selectedIconPath:'被选择后的图片',
						text:'文字1'
					},{
						pagePath:'/pages/链接名2/链接名2',
					  iconPath:'默认图片',
						selectedIconPath:'被选择后的图片',
						text:'文字2'
					}]
				}
			}
		}
	}
</script>

使用子组件收到的值

1，循环数组用’item/（item，index）in 数组’，’item.id-1/index’表示数组下标（一般数组里给的id=1开始）。
2，自定义名字1(selected)===item.id-1/index

三元运算符

概念：条件是不是true ？是，选1：不是，选2
1，切换icon图片：v-bind:src=’selected=index ? item.selectedIconPath : item.iconPath ‘
2，切换颜色样式：v-bind:class=”selected=index ? ‘tabbar-list-li-name（默认样式） active（加个颜色颜色）’ : ‘tabbar-list-li-name（默认样式）’”
3，这时只有第一个会变色，因为页面没有跳转，所以我们要绑定事件

4，在每一项绑定click事件，进行路由跳转。点击后传参函数接收跳转。

<template>
	<view class="tabbar">
		<view class="tabbar-list">
			<view class="tabbar-list-ul">
				<view class="tabbar-list-li" v-for="(item,index) in tabBar.list" :key='index' @click="setSelected(index)">
					<view class="tabbar-list-li-icon">
						<image :src="item.iconPath" mode=""></image>
					</view>
					<view 'tabbar-list-li-text'">{{ item.text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tabBar:{
					list:[{
						pagePath:'/pages/index/index',
						iconPath:'默认图片',
						selectedIconPath:'被选择后的图片',
						text:'首页'
					},{
						pagePath:'/pages/链接名1/链接名1',
						iconPath:'默认图片',
						selectedIconPath:'被选择后的图片',
						text:'文字1'
					},{
						pagePath:'/pages/链接名2/链接名2',
					  iconPath:'默认图片',
						selectedIconPath:'被选择后的图片',
						text:'文字2'
					}]
				}
			}
		},
    methods:{
			setSelected(index){
				uni.switchTab({
					url:this.tabBar.list[index].pagePath
				})
			}
		}
	}
</script>