2021-05-14小程序底部tabBar 顶部tab栏

最新推荐文章于 2025-06-26 22:07:28 发布

xiao-_yuanyuan-20

最新推荐文章于 2025-06-26 22:07:28 发布

阅读量454

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/xiao_yuanyuan_20/article/details/116903925

本文介绍了如何在小程序中配置底部tabBar，并详细说明了如何在不同页面上显示相应的顶部tab栏文字，以实现良好的导航体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，底部tabBar

全局设置底部tabBar，在需要显示的页面显示

//在app.json文件中设置。效果是：在首页 分类 购物车 我的 页面中显示，字体颜色，被选中的字体颜色，位置，底部边框的颜色，背景颜色 都是可以设置的；；list中定义在显示到哪些页面
"tabBar": {
    "color": "#999",
    "selectedColor": "#E6555B",
    "backgroundColor": "#F4F4F4",
    "position": "bottom",
    "borderStyle": "black",
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "icons/category.png",
        "selectedIconPath": "icons/category-o.png"
      },
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "icons/cart.png",
        "selectedIconPath": "icons/cart-o.png"
      },
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my-o.png"
      }
    ]

2，页面的顶部tab栏，显示对应的页面文字

第一步：在app.json文件中设置所有的页面顶部tab栏显示的文字
"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#f00",
    "navigationBarTitleText": "Weixin", //顶部tab栏显示
    "navigationBarTextStyle": "black"
  },
第二步：在当前页面的.json文件中，写入
 {
      "navigationBarTitleText":"购物车" //后面的引号就是定义的名称
 }
第二步：或者在当前页面的.js文件中，
	onLoad:function(opitons){
        wx.setNavigationBarTitle({
            title:'购物车' //后面的引号就是定义的名称
        })
    }