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>
相关推荐
耶啵奶膘1 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡4 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼7 小时前
微信小程序-prettier 格式化
微信小程序·小程序
我开心就好o8 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index8 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
qq_174482857510 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027710 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
初遇你时动了情16 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
licy__16 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
小小黑00719 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue