uniapp自定义tabbar

第一步:配置好需要作为tabbar页面的路径,并将custom属性设置为true,

第二部:tabbar组件的封装

<template>

<view class="tabbar">

<view class="item" v-for="(item,index) in list" :key="index" @click="goNav(item.pagePath,index)">

<view class="flex h-column h-center">

<image :src="current==index?item.selectedIconPath:item.iconPath"></image>

<view class="name" :class="current==index?'name-select':''">

{{item.text}}

</view>

</view>

</view>

</view>

</template>

<script>

export default{

props: ['current'],

data(){

return{

list: [{

iconPath: "../../../static/meijia/icon_navhome.png",

selectedIconPath: "../../../static/meijia/icon_navh_home.png",

text: '首页',

pagePath: '/pages/index/index',

},

{

iconPath: "../../../static/meijia/icon_navmy.png",

selectedIconPath: "../../../static/meijia/icon_navh_my.png",

text: '我的',

pagePath: '/pages/my/index',

},

]

}

},

methods:{

goNav(url,index) {

uni.switchTab({

url: url

})

}

}

}

</script>

<style lang="scss" scoped>

.tabbar {

position: fixed;

left: 0;

bottom: 0;

width: 100%;

background-color: rgb(255, 255, 255);

// border-top: 2rpx solid rgb(213, 215, 214);

padding: 20rpx 50rpx;

display: flex;

justify-content: space-between;

.item {

display: flex;

align-items: center;

padding-bottom: 20rpx;

image {

width: 54rpx;

height: 54rpx;

}

.name {

color: rgb(151, 152, 154);

font-size: 24rpx;

}

.name-select {

color: #333;

font-weight: bold;

}

}

}

</style>

第三步:在组件中使用,current的值即当前页面在tabbar页面数组中的索引

<tabbar :current="0" ></tabbar>

相关推荐
百思可瑞教育1 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
不想吃饭e2 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
00后程序员张3 小时前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
不知名的前端专家7 小时前
uniapp原生插件 TCP Socket 使用文档
网络·tcp/ip·uni-app·netty
fakaifa8 小时前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版
2501_916007479 小时前
Transporter App 使用全流程详解:iOS 应用 ipa 上传工具、 uni-app 应用发布指南
android·ios·小程序·https·uni-app·iphone·webview
fakaifa10 小时前
CRMEB多门店 v3.3源码 无授权限制+PC端+uniapp前端
小程序·uni-app·商城小程序·技术教程·源码下载·crmeb多门店
编程迪10 小时前
小说阅读系统Java源码 小说阅读软件开发 小说app小程序
小程序·uni-app·小说源码·小说系统·小说阅读app
Q_Q51100828511 小时前
springboot+python+uniapp基于微信小程序的旅游服务系统景点信息展示 路线推荐 在线预约 评论互动系统
spring boot·python·微信小程序·django·flask·uni-app
你很易烊千玺12 小时前
uniapp多端打包样式处理
uni-app·多端化css处理