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>
相关推荐
10年前端老司机31 分钟前
微信小程序模板语法和事件
前端·javascript·微信小程序
xx24061 小时前
UniApp学习笔记
uni-app
上趣工作室1 小时前
微信小程序开发1------微信小程序中的消息提示框总结
微信小程序·小程序
三天不学习3 小时前
微信小程序蓝牙连接打印机打印单据完整Demo【蓝牙小票打印】
微信小程序·小程序·蓝牙打印
七七小报5 小时前
uniapp-商城-36-shop 购物车 选好了 进行订单确认2 支付方式颜色变化和颜色滤镜filter
uni-app
lh_12545 小时前
uniapp 常用开发技巧与实战指南
uni-app
某公司摸鱼前端6 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_6 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
晨集6 小时前
Uni-App 多端电子合同开源项目介绍
java·spring boot·uni-app·电子合同
盛夏绽放10 小时前
uni-app中获取用户实时位置完整指南:解决权限报错问题
uni-app·notepad++