使用uniapp开发时自定义tabbar

预览图:

一、配置page.jsong中的tabbar(这一步是必须的,因为我们在使用uni.switchTab()时必须要用到)

javascript 复制代码
"tabBar": {
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/images/icon/home.png",
			"selectedIconPath": "static/images/icon/home_select.png",
			"text": "首页"
		}, {
			"pagePath": "pages/OldGoods/OldGoods",
			"iconPath": "static/images/icon/home.png",
			"selectedIconPath": "static/images/icon/home_select.png",
			"text": "二手"
		},{
			"pagePath": "pages/list/list",
			"iconPath": "",
			"selectedIconPath": "",
			"text": "权益"
		},{
			"pagePath": "pages/IntegralMall/IntegralMall",
			"iconPath": "",
			"selectedIconPath": "",
			"text": "积分商城"
		},{
			"pagePath": "pages/me/me",
			"iconPath": "static/images/icon/me.png",
			"selectedIconPath": "static/images/icon/me_select.png",
			"text": "我的"
		}]
	}

二、编写tabbar组件

view:
html 复制代码
<view class="tab-bar">
		<view class="center-btn-box">
			<view class="center-btn" @click="SwitchTab('/pages/list/list',2)">
				<image class="center-icon" src="../../static/images/label/cent_btn.png"></image>
			</view>
		</view>
		<view class="tab-list">
			<view :class="['tab-item',pageindex===index?'action':'']" v-for="(item,index) in list" @click="SwitchTab(item.path,index)">
				<view class="tab-icon">
					<image :src="pageindex===index?item.iconAction:item.icon" class="icon"></image>
				</view>
				<view class="tab-name">{{item.title}}</view>
			</view>
		</view>
	</view>
css:这里就省略了,我中间那个其实就是用一个元素把中间那个选项给遮挡住,点击时使用uni.switchTab()仅此而已
js:我这里使用props属性的方式传值,因为点击时要做页面状态的切换,
javascript 复制代码
props:{
			pageindex:Number
		},
		name:"TabBar",
		data() {
			return {
				list:[
					{
						title:"首页",
						icon:"../../static/images/label/tab_sy_01.png",
						iconAction:"../../static/images/label/tab_sy_02.png",
						path:"/pages/index/index?id=0"
					},
					{
						title:"二手",
						icon:"../../static/images/label/tab_es_01.png",
						iconAction:"../../static/images/label/tab_es_02.png",
						path:"/pages/OldGoods/OldGoods"
					},{
						title:"权益",
						icon:"../../static/images/label/tab_qy_01.png",
						iconAction:"../../static/images/label/tab_qy_02.png",
						path:"/pages/list/list"
					},{
						title:"积分商城",
						icon:"../../static/images/label/tab_jf_01.png",
						iconAction:"../../static/images/label/tab_jf_02.png",
						path:"/pages/IntegralMall/IntegralMall"
					},{
						title:"我的",
						icon:"../../static/images/label/tab_wd_01.png",
						iconAction:"../../static/images/label/tab_wd_02.png",
						path:"/pages/me/me"
					}
				]
			};
		},
使用组件:
html 复制代码
<template>
    <TabBar :pageindex="0"></TabBar>
</template>
<script>
    import TabBar from "@/components/TabBar/TabBar.vue"
    export default {
		components:{
			TabBar
		}
    }
</script>
相关推荐
Vicky&James9 分钟前
WPF到Web的无缝过渡:英雄联盟客户端项目OpenSilver迁移实战
前端·wpf
m0_7482336413 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟21 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386322 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596023 分钟前
前端代理,解决跨域问题讲解
前端
quitv28 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238137 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星38 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端