Taro中tabBar的使用

最新推荐文章于 2024-05-06 17:12:53 发布
最新推荐文章于 2024-05-06 17:12:53 发布
阅读量5k 收藏 1
点赞数
分类专栏： Taro 文章标签： 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42159343/article/details/104945854
版权

先在路径/src/app.tsx下将页面添加到页面管理中

pages: [
      'pages/index/index',
      'pages/toggle/toggle'
    ],

在页面管理的后面加上tabBar的内容

tabBar:{
      list:[
        {
          pagePath:"pages/index/index",
          text:"首页",
			// 未点击时显示的图片
          iconPath:"pages/images/a.jpg",
			// 点击后显示的图片
          selectedIconPath:"pages/images/b.jpg"
        },
        {
          pagePath:"pages/toggle/toggle",
          text:"cat",
          iconPath:"pages/images/a.jpg",
          selectedIconPath:"pages/images/b.jpg"
        }
      ]
    }

运行后的效果：
在这里插入图片描述

麻陌
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
自定义凸起TabBar
07-09
自定义凸起TabBar，解决TabBar背景色，描边黑线问题，解决原生UITabBarItem覆盖在自定义TabBar上问题，解决凸起部分点击无响应问题github地址：https://github.com/zk1947/CustomTaBar博客：https://www.cnblogs.com/zk1947/p/12626810.html
taro 创建 Tabbar
weixin_33910759的博客
10-30 3697
1.代码 src/app.js import '@tarojs/async-await' import Taro, { Component } from '@tarojs/taro' import Home from './pages/home' import dva from './utils/dva' import models from './models' import { Provid...
小程序Taro框架 自定义底部Tabbar，处理自定义Tab栏切换卡顿、闪烁
SAXX2的博客
03-04 1433
小程序Taro框架 自定义底部Tabbar，处理自定义Tab栏切换卡顿、闪烁
Taro + Vue 自定义标签栏TabBar
D_MM_的博客
08-06 2840
、1、app.config.ts：自定义TabBar就必须将custom设为true 2、 定义TabBar组件： customTabBar.vue <template> <view class='bottom-tab'> <view class='bottom-tab-item' v-for="(tabItem, index) in list" :key="tabItem.key" @tap="switchTab(tabItem.pagePat.
taro之--微信自定义tabbar
m0_74433188的博客
03-26 3500
Taro 支持使用 React、Vue、或者小程序原生语法来编写小程序自定义 TabBar 组件。
taro tabBar的设置，设置tabbar的文字，设置tabbar的图标
zyf_baby的博客
07-08 4298
taro tabBar的设置，设置tabbar的文字，设置tabbar的图标效果展示需求版本解决方案详细代码 效果展示 需求 为项目设置tabbar，并处理文字，以及放置本地图标的选中效果 版本 "@tarojs/cli": "3.2.14", 解决方案 1.文字很好设置，设置text即可 2.项目src下放入img文件夹和所需图片，如下图 // src/app.config.js tabBar: { list: [{ pagePath: 'pages/index/ind
taro全局配置页面路由和tabBar页面跳转
11-01 1298
有能力可以看官方文档：页面路由配置，配置在app.config.ts里面的pages里：window用于设置小程序的状态栏、导航条、标题、窗口背景色，其配置项如下：
taro开发钉钉小程序，打包后真机测试tabbar丢失解决方案，以及在小程序上使用路由守卫
qq9480的博客
04-12 1297
taro开发钉钉小程序tabbar消失解决方案，小程序使用路由守卫
taro之--路由与tabbar
m0_74433188的博客
03-24 459
其中前三个页面我们可以把它们规划在 tabBar 里，tabBar 是 Taro 内置的导航栏，可以在 app.config.js 配置，配置完成之后处于的 tabBar 位置的页面会显示一个导航栏。到目前为止，我们已经实现了这个应用的所有逻辑，除去「节点列表」页面（在进阶指南我们会讨论这个页面组件）之外，剩下的页面都可以通过我们已经讲解过的组件或页面快速抽象完成。在 src/components/thread 组件中，我们通过。首页，展示最新帖子（已完成）节点帖子 （可通过组件复用）帖子详情 （已完成）
自定义底部导航栏（tabBar）
03-29
如果大家用过微信提供的tabBar就会发现，他的tabBar有很大的局限性。 暂且不说样式局限性了，他提供的app.json配置文件中没有function。 这也就意味着使用它提供的这个组件，你只能用于跳转页面，不能干其它的事情 ...
一款基于Taro底部导航组件支持最多5个tabbar
08-10
一款基于 Taro 底部导航组件，支持最多 5 个 tabbar
vue3+taro+nutui+pina小程序空白框架
03-25
vue3+taro+nutui+pina小程序空白框架
小程序（三）配置tabbar及自定义tabbar样式
09-26
关于tabbar部分，官方文档是有明确的说明的，当然，我这里是不存在把官方文档给你复制一遍的情况。...这个主要是使用小程序自带的tabbar，在项目根目录下的app.json中配置，这个简单配置一下就可以了。
基于家政小程序的个性化家政服务研究
2402_83689311的博客
05-06 219
基于家政小程序的个性化家政服务研究，是近年来随着移动互联网技术的快速发展和人们生活品质的提高而兴起的一个热门话题。以下是对该领域的研究探讨： 一、引言 随着现代生活节奏的加快，家政服务已成为越来越多家庭不可或缺的一部分。然而，传统的家政服务模式存在着服务质量参差不齐、价格不透明、预约不便等问题。为了解决这些问题，基于家政小程序的个性化家政服务应运而生。该服务模式通过利用移动互联网技术，实现了家政服务的精准匹配、实时互动和数据驱动，为用户提供了更加便捷、高效、贴心的家政服务体验。 二、个性化家政服务
母婴店运用商城小程序店铺的效果是什么
qq_46171038的博客
05-06 243
线上卖货，营销都是不可少的，运用商城系统让商家随时开展营销，线上线下赋能，优惠券、新人有礼、积分商城、组合套餐、定金预售、互动游戏、礼品卡等多种功能，每一种都能提升商城销量。，将自己的产品放到线上让用户消费，提高营收及市场拓展。↓↓↓点击“官网”直达。
智能小程序 Ray 开发——表单组件 Button 和 Checkbox 实操讲解
物联网探索者
05-06 172
多端按钮基础组件，可用于进行强交互的操作。
陪诊小程序：温情陪伴，就医无忧
nhgworld的博客
04-29 564
在就诊过程中，陪诊员将全程陪同，协助您完成挂号、缴费、取药等繁琐事务，让您无需为就医流程而烦恼。同时，陪诊员还会根据您的身体状况和需求，提供个性化的关怀和建议，让您在就医过程中感受到家一般的温暖。我们的陪诊员都经过严格的筛选和培训，具备丰富的医疗知识和良好的服务意识，能够为您提供全方位的陪诊支持。陪诊小程序还具备智能导航功能，能够帮助您快速找到医院内的各个科室和设施，避免在陌生的环境中迷失方向。此外，我们还提供实时沟通功能，让您与陪诊员随时保持联系，随时解决就医过程中的疑问和困难。
小程序激励广告视频多次回调问题
最新发布
kaolagirl的博客
05-06 64
【代码】小程序激励广告视频多次回调问题。
taro中如何使用svg图片
03-25
在 taro 中使用 SVG 图片，需要先在 Taro.config.js 配置文件中进行注册： ```javascript module.exports = { ... "usingComponents": { "svg": "/static/components/svg/svg" } ... } ``` 然后创建一个 svg 组件： ```javascript import Taro from '@tarojs/taro'; import { View } from '@tarojs/components'; export default class Svg extends Taro.Component { static options = { addGlobalClass: true } static defaultProps = { width: '100%', height: '100%' } render() { const { width, height, src, className } = this.props; return ( <View className={className}> <svg style={{ width, height }} viewBox={`0 0 ${width} ${height}`} > <use xlinkHref={`/static/svg/${src}.svg#${src}`} /> </svg> </View> ); } } ``` 然后，在需要使用的页面中引用 svg 组件，传入 src 参数即可： ```javascript import Taro from '@tarojs/taro'; import { View } from '@tarojs/components'; import Svg from 'svg'; export default class Index extends Taro.Component { render() { return ( <View> <Svg src="example" width="50px" height="50px" /> </View> ); } } ``` 其中，example.svg 文件需要放置在 static/svg 目录中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值