taro底部导航,Tabbar

没有特别的幸运,那么就特别的努力!!!

配置信息

官方给出:
在 app.config 中按正常填写 tabBar 项的相关配置(为了向下兼容),并把 tabBar 项的 custom 字段设置为 true。但我试过 custom设置为 false 才生效

1.app.config.js 文件配置

// app.config.js
export default defineAppConfig({pages: ["pages/index/index", "pages/complaint/index", "pages/mine/index"],window: {backgroundTextStyle: "light",navigationBarBackgroundColor: "#fff",navigationBarTitleText: "WeChat",navigationBarTextStyle: "black",},tabBar: {custom: false,color: "#000000",selectedColor: "#DC143C",backgroundColor: "#ffffff",list: [{pagePath: "pages/index/index",selectedIconPath: "images/tabbar_home_on.png",iconPath: "images/tabbar_home.png",text: "首页",},{pagePath: "pages/mine/index",selectedIconPath: "images/tabbar_my_on.png",iconPath: "images/tabbar_my.png",text: "个人中心",},],},
});

2.添加 custom-tab-bar

在 src 目录下添加 custom-tab-bar 目录,在里面书写组件,支持 React、Vue 和原生写法。

├── config
├── src
|   └── custom-tab-bar
|       ├── index.config.ts
|       └── index.tsx
└── package.json
// src/custom-tab-bar/index.tsx
import { Component } from 'react'
import Taro from '@tarojs/taro'
import { CoverView, CoverImage } from '@tarojs/components'import './index.scss'export default class Index extends Component {state = {selected: 0,color: '#000000',selectedColor: '#DC143C',list: [{pagePath: '/pages/index/index',selectedIconPath: '../images/tabbar_home_on.png',iconPath: '../images/tabbar_home.png',text: '首页'},{pagePath: '/pages/mine/index',selectedIconPath: '../images/tabbar_my_on.png',iconPath: '../images/tabbar_my.png',text: '个人中心'}]}switchTab(index, url) {this.setSelected(index)Taro.switchTab({ url })}setSelected (idx: number) {this.setState({selected: idx})}render() {const { list, selected, color, selectedColor } = this.statereturn (<CoverView className='tab-bar'><CoverView className='tab-bar-border'></CoverView>{list.map((item, index) => {return (<CoverView key={index} className='tab-bar-item' onClick={this.switchTab.bind(this, index, item.pagePath)}><CoverImage src={selected === index ? item.selectedIconPath : item.iconPath} /><CoverView style={{ color: selected === index ? selectedColor : color }}>{item.text}</CoverView></CoverView>)})}</CoverView>)}
}

3.底部组件都需要引入

// src/page/mine/index.tsx
import { View, Text } from '@tarojs/components'
import Taro,{ useLoad } from '@tarojs/taro'
import './index.scss'import type CustomTabBar from '../../custom-tab-bar'export default function Mine () {const pageCtx = Taro.getCurrentInstance().pageuseLoad(() => {const tabbar = Taro.getTabBar<CustomTabBar>(pageCtx)tabbar?.setSelected(1)})return (<View className='mine'><Text>mine-1</Text></View>)
}

希望能帮助到大家,同时祝愿大家在开发旅途中愉快!!!

拿着 不谢 请叫我“锤” !!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/57436.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Chromium 中chrome.contextMenus扩展接口实现分析c++

一、chrome.contextMenus 使用 chrome.contextMenus API 向 Google Chrome 的上下文菜单中添加项。您可以选择从右键菜单中添加的对象类型&#xff0c;例如图片、超链接和页面。 权限 contextMenus 您必须在扩展程序的清单中声明 "contextMenus" 权限&#xff0c…

R语言机器学习算法实战系列(十二)线性判别分析分类算法 (Linear Discriminant Analysis)

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍LDA的原理LDA的步骤教程下载数据加载R包导入数据数据预处理数据描述数据切割构建模型预测测试数据评估模型模型准确性混淆矩阵模型评估指标ROC CurvePRC Curve保存模型总结优点:缺…

Ubuntu(22.04)本地部署Appsmith

Ubuntu&#xff08;22.04&#xff09;安装Appsmith 简要介绍 Appsmith 是一个开源的低代码开发平台&#xff0c;旨在帮助开发者和非开发者快速构建定制化的内部应用程序和管理工具。通过直观的拖拽界面和丰富的预配置组件&#xff0c;Appsmith 让用户无需编写大量代码即可创建…

Postman使用-基础篇

前言 本教程将结合业界广为推崇和使用的RestAPI设计典范Github API&#xff0c;详细介绍Postman接口测试工具的使用方法和实战技巧。 在开始这个教程之前&#xff0c;先聊一下为什么接口测试在现软件行业如此重要&#xff1f; 为什么我们要学习Postman&#xff1f; 现代软件…

数据轻松上云——Mbox边缘计算网关

随着工业4.0时代的到来&#xff0c;工厂数字化转型已成为提升生产效率、优化资源配置、增强企业竞争力的关键。我们凭借其先进的边缘计算网关与云平台技术&#xff0c;为工厂提供了高效、稳定的数据采集与上云解决方案。本文将为您介绍Mbox边缘计算网关如何配合明达云平台&…

React 基础阶段学习计划

React 基础阶段学习计划 目标 能够创建和使用React组件。理解并使用State和Props。掌握事件处理和表单处理。 学习内容 环境搭建 安装Node.js和npm 访问 Node.js官网 下载并安装最新版本的Node.js。打开终端或命令行工具&#xff0c;输入 node -v 和 npm -v 检查是否安装…

【Python】爬虫

Python爬虫是一种自动化下载网页内容的程序。以下是一个简单的Python爬虫示例&#xff0c;使用requests库获取网页&#xff0c;并用BeautifulSoup解析网页。 首先&#xff0c;你需要安装必要的库&#xff1a; pip install requests pip install beautifulsoup4 以下是一个简…

基于SpringBoot微信小程序的书院预约系统【附源码】

基于SpringBoot微信小程序的书院预约系统 效果如下&#xff1a; 微信小程序首页界面 用户登录界面 书院信息界面 会议室界面 管理员登录界面 管理员主界面 用户界面 书院信息界面 会议室界面 会议室预约界面 研究背景 随着社会的快速发展&#xff0c;计算机技术的影响是全面…

SpringBoot 单元测试 - 登录认证在 Spring Boot 上的标准单元测试写法。

&#x1f449; 请投票支持这款 全新设计的脚手架 &#xff0c;让 Java 再次伟大&#xff01; 不要使用 SpringBootTest 使用 SpringBootTest 进行单元测试会启动整个 Spring Boot 容器&#xff0c;并引入整个项目的 development&test 依赖。缺点是速度慢、体积大、测试目标…

HarmonyOS Next应用开发——图像PixelMap变换

【高心星出品】 图像变换 图片处理指对PixelMap进行相关的操作&#xff0c;如获取图片信息、裁剪、缩放、偏移、旋转、翻转、设置透明度、读写像素数据等。图片处理主要包括图像变换、位图操作&#xff0c;本文介绍图像变换。 图形裁剪 // 裁剪图片 x&#xff0c;y为裁剪的起…

【element-tiptap】如何把分隔线改造成下拉框的形式?

当前的分隔线只有细横线这一种形式 但是咱们可以看一下wps中的分隔线&#xff0c;花里胡哨的 这些在wps里都需要使用快捷键打出来&#xff0c;真没找到菜单在哪里 那么这篇文章咱们就来看一下如何改造分隔线组件&#xff0c;改造成下拉框的形式&#xff0c;并且把咱们想要的分…

如何调试浏览器中的内存泄漏?

聚沙成塔每天进步一点点 本文回顾 ⭐ 专栏简介⭐ 如何调试浏览器中的内存泄漏&#xff1f;1. 什么是内存泄漏&#xff1f;2. 调试内存泄漏的工具3. 如何使用 Memory 面板进行内存调试3.1 获取内存快照&#xff08;Heap Snapshot&#xff09;获取内存快照的步骤&#xff1a;快照…

【ShuQiHere】深入解析数字电路中的锁存器与触发器

深入解析数字电路中的锁存器与触发器 &#x1f916;&#x1f50c; 在数字电路设计中&#xff0c;**锁存器&#xff08;Latch&#xff09;和触发器&#xff08;Flip-Flop&#xff09;**是实现时序逻辑的基本元件。它们能够存储状态&#xff0c;是构建复杂数字系统的关键。本文将…

Dockerfile 中关于 RUN 的奇怪写法 -- 以 | 开头

在一个大型的官方镜像中 &#xff0c;我通过 docker history --no-trunc <image_id> 看到&#xff0c;该镜像某一步的构建过程是&#xff1a; RUN |3 CUDA_VERSION12.4.1.003 CUDA_DRIVER_VERSION550.54.15 JETPACK_HOST_MOUNTS /bin/sh -c if [ -n "${JETPACK_HOS…

如何自定义一个自己的 Spring Boot Starter 组件(从入门到实践)

文章目录 一、什么是 Spring Boot Starter&#xff1f;二、为什么要自定义 Starter&#xff1f;三、自定义 Starter 的基本步骤1. 创建 Maven 项目2. 配置 pom.xml3. 创建自动配置类4. 创建业务逻辑类5. 创建 spring.factories 四、使用自定义 Starter五、总结推荐阅读文章 在使…

Android广播限制Background execution not allowed: receiving Intent { act=

“Background execution not allowed: receiving Intent”这个错误信息通常出现在Android应用开发中&#xff0c;特别是在处理后台任务或接收广播&#xff08;Broadcast&#xff09;时。这个错误表明应用试图在后台执行某些操作&#xff0c;但Android系统出于电池优化和用户体验…

【二刷hot100】day 4

终于有时间刷刷力扣&#xff0c;求实习中。。。。 目录 1.最大子数组和 2.合并区间 3.轮转数组 4.除自身以外数组的乘积 1.最大子数组和 class Solution {public int maxSubArray(int[] nums) {//就是说可以转换为计算左边的最大值&#xff0c;加上中间的值&#xff0c…

1.6,unity动画Animator屏蔽某个部位,动画组合

动画组合 一边跑一边攻击 using System.Collections; using System.Collections.Generic; using UnityEngine;public class One : MonoBehaviour {private Animator anim;// Start is called before the first frame updatevoid Start(){anim GetComponent<Animator>();…

Scala中的reduce

作用&#xff1a;reduce是一种集合操作&#xff0c;用于对集合中的元素进行聚合操作&#xff0c;返回一个单一的结果。它通过指定的二元操作&#xff08;即取两个元素进行操作&#xff09;对集合中所有的元素进行递归处理&#xff0c;并最终将其合并为一个值。 语法&#xff1…

PPT自动化:Python如何修改PPT文字和样式!

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 文章内容 📒📝 使用 Python 修改 PPT 文本内容📝 遍历所有幻灯片和文本框📝 设置和修改文本样式📝 复制和保留文本样式⚓️ 相关链接 ⚓️📖 介绍 📖 在日常工作中,PPT 的文字内容和样式修改似乎是一项永无止境的…