当前位置: 首页 > article >正文

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 配置代码

{
  "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代码

<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代码

<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>

http://www.kler.cn/a/300364.html

相关文章:

  • CentOS 安装Redis
  • 生产环境中常用的设计模式
  • 【环境搭建】Metersphere v2.x 容器部署教程踩坑总结
  • PHP教育系统小程序
  • 哈希(hashing)、哈希函数(Hash Function)、哈希表(Hash Table)、哈希冲突(Hash Collision)
  • 【2024 年度总结】从小白慢慢成长
  • 1.C++入门1(c++编译过程,命名空间,C++输入输出,缺省参数)
  • 代码随想录训练营 Day57打卡 图论part07 53. 寻宝(prim,kruskal算法)
  • 全国历年高考真题2008-2024
  • 互联网摸鱼日报(2024-09-09)
  • 计算机三级网络技术总结 第十一章网络管理技术
  • 在mac中使用numbers对数据进行分列(更详细的回答,已解决)
  • 基于IOT的供电房监控系统(实物)
  • gdb 前端:kdbg 安装使用
  • C#如何简单地组合linq查询条件
  • RESTful Web服务详细解释
  • 数据库sqlite3
  • iOS 本地图片扫描优化
  • Pyspark下操作dataframe方法(3)
  • 【Python第三方库】OpenCV库实用指南
  • UnLua环境搭建
  • Vue3中的监听器。toRefs与toRef的区别
  • 海康威视相机在QTcreate上的使用教程
  • 【SQL】百题计划 - SQL最基本的判断和查询。
  • 【C++】入门基础(上)
  • 在 Windows 系统上,文件传输到虚拟机(VM)可以通过 VS Code 的图形界面(GUI)或命令行工具进行操作