使用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>
相关推荐
中微子3 分钟前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 分钟前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
2501_915918411 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js