6
微信小程序开发实战（20）：TabBar导航
source link: https://blog.csdn.net/nokiaguy/article/details/107873525
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
微信小程序开发实战（20）：TabBar导航
在很多App中，首页的下方通常会出现3到5个TabBar按钮，如图1所示。通过这些按钮，可以切换到不同的页面。其实这也属于导航的一种方式。
图1 App中TabBar的效果
其实小程序可以用非常简单的方式来实现这个效果，这一切不需要编写一行JavaScript代码。现在准备3个页面，如果是新建的小程序工程，默认会建立两个页面：index和logs，我们可以再建立一个page页面（新加的页面不要忘了在app.json文件中配置）。包含3个页面的工程结构如图2所示。
图2 工程目录结构
添加TabBar按钮，只需在app.json文件中添加tabBar属性即可，代码如下：
运行程序后，会显示如图3所示的效果。点击TabBar按钮可切换不同的页面。
图3 带TabBar的小程序
实际上，通过将tabBar的position属性值设为top，会将按钮放到页面上方，不过图像就不会显示了，效果如图4所示。
图4 在页面顶端显示TabBar的效果
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK