微信小程序01-底部导航栏设置

这篇具有很好参考价值的文章主要介绍了微信小程序01-底部导航栏设置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图

微信小程序底部导航栏怎么设置,小程序,微信小程序,小程序,微信

操作步骤: 

1 在app.json找到 pages,增加pages配置地址栏路径,保存后会自动生成相应文件夹;

2,增加  tabBar  参数,“selectedColor” 参数是设置选中后文字的颜色;"list" 中放置导航数据。

     list 中 相关参数: pagePath ----> 指向地址

                                  text   ---->   导航文字

                                  iconPath   ----->  导航图标

                                  selectedIconPath  ----->  选中状态下导航图标         文章来源地址https://www.toymoban.com/news/detail-523448.html

{
  "pages": [
    "pages/index/index",
    "pages/list/list",
    "pages/mine/mine",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小哲个人商店",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#eeeeee"
  },
  "tabBar": {
    "selectedColor": "#fc5531",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./images/home.png",
        "selectedIconPath": "./images/selected-home.png"
      },
      {
        "pagePath": "pages/list/list",
        "text": "列表",
        "iconPath": "./images/list.png",
        "selectedIconPath": "./images/selected-list.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "./images/mine.png",
        "selectedIconPath": "./images/selected-mine.png"
      }
    ]
  },
  "debug": true,
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

到了这里,关于微信小程序01-底部导航栏设置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包