Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小程序之实现自定义tabbar按钮

小程序之实现自定义tabbar按钮

原创
作者头像
用户6493868
发布于 2022-03-07 13:07:24
发布于 2022-03-07 13:07:24
78300
代码可运行
举报
文章被收录于专栏:vue封装H5vue封装H5
运行总次数:0
代码可运行
效果图
2022-03-07_210456.png
2022-03-07_210456.png
实现步骤

在app.json文件中配置tabBar属性

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"tabBar": {
    "color": "#DDDDDD",
    "selectedColor": "#E1B368",
    "backgroundColor": "#282828",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "./images/home.png",
        "selectedIconPath": "./images/home-active.png"
      },
      {
        "pagePath": "pages/akers/akers",
        "text": "爱柯爱车",
        "iconPath": "./images/akers.png",
        "selectedIconPath": "./images/akers-active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "个人中心",
        "iconPath": "./images/me.png",
        "selectedIconPath": "./images/me-active.png"
      }
    ]
  }
}

iconPath 即可配置自定义按钮的图标

selectedIconPath 自定义按钮选中之后的颜色

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序从零开始开发步骤(三)底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的。即点击底部的导航,会实现不同对应页面之间的切换。
王小婷
2025/05/18
2180
微信小程序从零开始开发步骤(三)底部导航栏
自定义tabBar(类似咸鱼)
在App上做类似咸鱼的Tabbar时,只能用自定义的方法,考虑小程序中如果想自定义像咸鱼这样的Tabbar,该如何实现呢?网上搜索的大多资料的tabbar都会在页面切换的时候重新渲染,下面的方法页面跳转时不会闪。
honey缘木鱼
2018/09/26
1.5K0
自定义tabBar(类似咸鱼)
【小程序项目开发-- 京东商城】uni-app开发之配置 tabBar & 窗口样式
👋👋欢迎来到👋👋 🎩魔术之家!!🎩 该文章收录专栏 ✨-- 2022微信小程序京东商城实战 --✨ 专栏内容 ✨-- 京东商城uni-app项目搭建 --✨ ✨-- 京东商城uni-app 配置tabBar & 窗口样式 --✨ ✨-- 京东商城uni-app开发之分包配置 --✨ ✨-- 京东商城uni-app开发之轮播图 --✨ ✨-- 京东商城uni-app之分类导航区域 --✨ ✨-- 京东商城uni-app 首页楼层商品 --✨ ✨-- 京东商城uni-app
计算机魔术师
2022/08/23
4510
【小程序项目开发-- 京东商城】uni-app开发之配置 tabBar & 窗口样式
小程序实践(一):主页tab选项实现
官方文档 效果图: 实现底部Tab选项,只需要在项目根目录下的app.json下修改 如图:  ----------------------------------------------------
听着music睡
2018/07/03
7670
【愚公系列】2022年11月 微信小程序-Vant实现自定义tabBar
小程序自定义tabBar官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
愚公搬代码
2022/11/18
1.3K0
【愚公系列】2022年11月 微信小程序-Vant实现自定义tabBar
零基础微信小程序开发——全局配置之tabBar(保姆级教程+超详细)
🎥 作者简介: CSDN\阿里云\腾讯云\华为云开发社区优质创作者,专注分享大数据、Python、数据库、人工智能等领域的优质内容 🌸个人主页: 长风清留杨的博客 🍃形式准则: 无论成就大小,都保持一颗谦逊的心,尊重他人,虚心学习。 ✨推荐专栏: Python入门到入魔,Mysql入门到入魔,Python入门基础大全,Flink入门到实战 🍂若缘分至此,无法再续相逢,愿你朝朝暮暮,皆有安好,晨曦微露道早安,日中炽热说午安,星河长明寄晚安🍂
小白的大数据之旅
2024/12/24
7250
零基础微信小程序开发——全局配置之tabBar(保姆级教程+超详细)
tabbar 页面是什么意思?用什么跳转到tabbar页面
一般看到这个地方看不明白的是看到wx.navigateTo(Object object)这个地方下边的提示.
知识浅谈
2021/06/01
2.7K0
微信小程序从零开始开发步骤(三)底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的。即点击底部的导航,会实现不同对应页面之间的切换。 我们先来看个我们要实现的底部导航栏的效果图:(三个导
王小婷
2018/05/31
4.3K1
小程序中tabBar的使用
知晓程序员,专注微信小程序开发的程序员! 今天说说tabBar的使用,先看看官方说法:如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。 备注: 当设置 position 为 top 时,将不会显示 icon tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。 (tabBar图例讲解) 今天在做投一个小程序时,也用到
连胜
2018/03/07
2.9K0
小程序中tabBar的使用
微信小程序自定义 tabBar 踩坑实践
创建一个与 /pages 的同级目录,命名为 /custom-tab-bar,注意目录层级与目录命名问题,不可用其他名称命名。
江不知
2020/11/03
7K1
小程序自定义tabbar的两种方式
在根目录下创建custom-tab-bar目录,然后在该目录下新建组件component,注意是组件,不要建成page页面,虽然都一样是js/json/wxml/wxss四个文件
全栈程序员站长
2022/11/17
1K0
小程序自定义tabbar的两种方式
微信小程序开发-Tab页切换及Grid布局
今天摸索了一下微信小程序的前端开发,作为入门教程,让你能够快速构建页面并且了解小程序,先看下今天完成的效果图。
code2roc
2023/07/19
8130
微信小程序开发-Tab页切换及Grid布局
微信小程序开发实战(20):TabBar导航
在很多App中,首页的下方通常会出现3到5个TabBar按钮,如图1所示。通过这些按钮,可以切换到不同的页面。其实这也属于导航的一种方式。
蒙娜丽宁
2020/08/11
9590
微信小程序开发实战(20):TabBar导航
新手开发 微信小程序 跳转失效问题
非tabBar.list,页面中跳转用wx.redirectTo 或者 wx.navigateTo
用户2596882
2024/05/08
1810
微信小程序入门《四》实例:导航栏样式、tabBar导航栏
实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义。 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ "pages/index/index", "pages/login/login", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"red", "navigationBarBack
极乐君
2018/02/05
3.4K0
微信小程序入门《四》实例:导航栏样式、tabBar导航栏
小程序底部导航
"navigationBarBackgroundColor": "#1296db",
万泉
2019/11/06
9460
小程序底部导航
微信小程序底部导航栏实现
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的。即点击底部的导航,会实现不同对应页面之间的切换。
王小婷
2020/09/27
15.7K0
零基础微信小程序开发——页面导航之编程式导航(保姆级教程+超详细)
调用 wx.switchTab(Object object) 方法,可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下
小白的大数据之旅
2024/12/28
1790
零基础微信小程序开发——页面导航之编程式导航(保姆级教程+超详细)
微信小程序tabbar设置样式在哪里改
  微信小程序tabbar通俗点说就是底部导航,我们一般会配置相关的菜单,方便读者快速导航。tabbar是在项目根目录中的配置文件 app.json 中进行设置;如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。tips:当设置 position 为 top 时,将不会显示 icon; tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序
ytkah
2018/06/20
11.3K3
小程序快速入门教程 1.1 小程序开发入门
结合刚创建的 DEMO,大致了解下小程序的文件结构和页面组成,详细的内容可以查看 小程序代码构成。
twowinter
2020/04/17
1.1K0
小程序快速入门教程 1.1 小程序开发入门
推荐阅读
相关推荐
微信小程序从零开始开发步骤(三)底部导航栏
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验