使用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>
相关推荐
Youyzq1 分钟前
前端box-shadow出现兼容性问题如何处理
前端
携欢9 分钟前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss
三小河17 分钟前
工作中的Ai工具汇总
前端
mapbar_front36 分钟前
react项目开发—关于代码架构/规范探讨
前端·react.js
二木一夕42 分钟前
Vue 3 的组合式 API和传统选项式 API区别(vue2转vue3,两者差异)
前端
LuckySusu44 分钟前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js
LuckySusu44 分钟前
【vue篇】Vue.delete vs delete:数组删除的“陷阱”与正确姿势
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue 模板编译原理:从 Template 到 DOM 的翻译官
前端·vue.js
小菜摸鱼1 小时前
Node.js + vue3 大文件-切片上传全流程(视频文件)
前端·node.js
LuckySusu1 小时前
【vue篇】Vue 2 响应式“盲区”破解:如何监听对象/数组属性变化
前端·vue.js