微信小程序|底部标签导航

算法与编程之美

发布于 2020-02-13 17:44:16

1.6K00

代码可运行

文章被收录于专栏：算法与编程之美算法与编程之美

运行总次数：0

代码可运行

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

底部标签导航可以说是任何一个APP的标配，那么该如何设置底部标签导航呢？

解决方案

制作标签导航首先需要我们自己将找到的图片保存进目录文件夹里，小程序界面会自动更新，然后再在App.json配置文件。

在App.json:

{

  "pages":  [

     "pages/movie/movie",

     "pages/cinema/cinema",

     "pages/find/find",

     "pages/me/me"

   ],

 

  "tabBar":  {

     "selectedColor": "#D53E37",

     "backgroundColor": "#f5f5f5",

     "borderStyle": "white",

     "list": [

       {

         "pagePath": "pages/movie/movie",

         "text": "电影",

         "iconPath": "pages/images/video.png",

         "selectedIconPath": "pages/images/video (1).png"

       },

       {

         "pagePath": "pages/cinema/cinema",

         "text": "影院",

         "iconPath": "pages/images/search.png",

         "selectedIconPath": "pages/images/search (1).png"

       },

       {

         "pagePath": "pages/find/find",

         "text": "发现",

         "iconPath": "pages/images/add_friend.png",

         "selectedIconPath": "pages/images/add_friend  (1).png"

       },

       {

         "pagePath": "pages/me/me",

         "text": "我的",

         "iconPath": "pages/images/star.png",

         "selectedIconPath": "pages/images/star(1).png"

       }

     ]

   },

  "sitemapLocation":  "sitemap48.json"

}

效果图：