uniapp+uview-plus实现微信小程序自定义tabbar

参考文档

微信小程序相关开发文档链接:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

虽然是uniapp框架但是实现方式和原生小程序相似

实现思路

1、app.json里面tabBar添加配置 custom:true,其他和非自定义设置一样

2、在components文件夹里添加Tabbar组件

3、在对应的页面里引用Tabbar组件

pages.json 配置代码

c 复制代码
{
  "tabBar": {
    "custom": true, //必写
    "color": "#000000",   //color,selectedColor,backgroundColor可不写
    "selectedColor": "#000000", //tab选中颜色
    "backgroundColor": "#000000",
    "list": [{ //每个tab对应的路由路径
      "pagePath": "page/index/index",//此处page前面未加/
      "text": "首页"
    }, {
      "pagePath": "page/index/order",
      "text": "订单"
    },{
      "pagePath": "page/index/myUser",
      "text": "我的"
    },
    ]
  },
}

Tabbar组件代码

HTML代码

c 复制代码
<template>
  <u-tabbar 
  	:value="activeIndex" 
  	fixed 
  	activeColor="#11C0D7" 
  	inactiveColor="#8C8C8C"
  >
    <u-tabbar-item
      v-for="(item, index) in tabList"
      :text="item.text"
      :key="index"
      :border="false"
      @click="tabBarChange(item.pagePath, index)"
    >
      <template #active-icon>
        <image class="u-page__item__slot-icon" :src="item.selectedIconPath"></image>
      </template>
      <template #inactive-icon>
        <image class="u-page__item__slot-icon" :src="item.iconPath"></image>
      </template>
    </u-tabbar-item>
  </u-tabbar>
</template>

JS代码

c 复制代码
<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
const tabList = ref([
  {
    pagePath: 'index',
    text: '首页',
    iconPath: '../../static/images/index.png', //本地图片
    selectedIconPath: '../../static/images/index_select.png'
  },
  {
    pagePath: 'order',
    text: '订单',
    iconPath: '../../static/images/order.png',
    selectedIconPath: '../../static/images/order_select.png'
  },
  {
    pagePath: 'myUser',
    text: '我的',
    iconPath: '../../static/images/user.png',
    selectedIconPath: '../../static/images/user_select.png'
  }
])
const activeIndex = ref(0) //当前选中项
onShow(() => {
  getActiveIndex()
})

// 自定义tab组件监听页面路径选中下标
const getActiveIndex = () => {
  const pages = getCurrentPages()
  let page = pages[pages.length - 1]
  tabList.value.forEach((item: any, index: number) => {
    if (`pages/index/${item.pagePath}` == page.route) {
      activeIndex.value = index
    }
  })
}

function tabBarChange(url: string, index: number) {
  uni.switchTab({
    url
  })
}
</script>

在页面中引入

<!-- 每个tabbar对应的路由页面,page最好添加 padding-bottom:calc(env(safe-area-inset-bottom) + 24rpx + 50px); 50是设置的tabbar的高度,24是留余的页面空白 -->

<template>
	<TabBar />
</template>
<script setup lang="ts">
	import TabBar from '@/components/Tabbar/index.vue'

</script>
相关推荐
小泽呀x2 小时前
微信小程序中使用离线版阿里云矢量图标
微信小程序·小程序
fakaifa2 小时前
CRMEB Pro版v3.1源码全开源+PC端+Uniapp前端+搭建教程
前端·小程序·uni-app·php·源码下载
转角羊儿2 小时前
uni-app请求方法封装⑦
uni-app
java知路2 小时前
uniapp h5实现录音
uni-app
haodanzj4 小时前
在uniapp中封装请求接口 (带刷新token)
前端·javascript·uni-app
空&白4 小时前
uniapp h5地址前端重定向跳转
前端·uni-app
工业互联网专业5 小时前
Python毕业设计选题:基于Django+uniapp的公司订餐系统小程序
vue.js·python·小程序·django·uni-app·源码·课程设计
家里有只小肥猫5 小时前
关于vue生命周期
uni-app·uniapp
不法5 小时前
uniapp 跨域前端代理
前端·uni-app
堕落年代6 小时前
在uniapp当中隐藏掉默认tabbar并且使用自己的tabbar
前端·javascript·uni-app