使用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>
相关推荐
GISer_Jing8 分钟前
sqb&ks二面(准备)
前端·javascript·面试
谢尔登13 分钟前
【Webpack】模块联邦
前端·webpack·node.js
前端码虫17 分钟前
2.9Vue创建项目(组件)的补充
javascript·vue.js·学习
Bottle41430 分钟前
深入探究 React Fiber(译文)
前端
汤姆Tom36 分钟前
JavaScript Proxy 对象详解与应用
前端·javascript
BillKu36 分钟前
Vue3中app.mount(“#app“)应用挂载原理解析
javascript·vue.js·css3
xiaopengbc42 分钟前
在 React 中如何使用 useMemo 和 useCallback 优化性能?
前端·javascript·react.js
GISer_Jing44 分钟前
React 18 过渡更新:并发渲染的艺术
前端·javascript·react.js
风早爽太1 小时前
在uni-app中使用lottie-web来展示Lottie动画
uni-app
全栈技术负责人1 小时前
前端网络性能优化实践:从 HTTP 请求到 HTTPS 与 HTTP/2 升级
前端·网络·http