当前位置:首页 >> 新闻资讯>> 常见问题

小程序的底部导航栏是怎么实现的?

发表时间:2021-09-29

在小程序的开发过程中,我们喜欢将小程序分为许多开发模块。当我们想显示这些模块时,我们通过底部的导航栏显示它们。单击不同的按钮以显示不同的模块;在这里,我们来讨论小程序底部导航栏的实现方式。

首先在此处发布小程序 Tabbar官方网站地址

属性

我要在此处发布属性

这里需要注意属性。 list属性是创建标签栏时list集合中元素的属性。

文本是元素的标题iconPath是元素上方的图标IconPath是元素被选中时的图标徽章是否显示右上角的红点代码实现步骤

使用标签栏实际上非常简单。

首先,我们需要在app.json文件中配置标签栏元素收集信息。请注意,它是app.json文件。

"tabBar": { "list": [{ "pagePath": "pagePath", "text": "text", "iconPath": "iconPath", "selectedIconPath": "selectedIconPath" }] }

当我们进入标签栏并按Enter时,上面的代码将自动为我们生成,我们需要对其进行修改。

然后修改标签栏代码,配置页面跳转路径和标题:

"tabBar": { "color": "#2b333b", "selectedColor": "#3bb149", "borderStyle": "black", "list": [{ "pagePath": "pages/index/index", "text": "首页" },{ "pagePath": "pages/other/other", "text": "其他" },{ "pagePath": "pages/personal/personal", "text": "我的" }] },

颜色默认颜色

selectedColor选定的颜色

列表标签栏元素集合

效果图:

我们可以看到底部有一个导航栏微信小程序导航栏开发,并且默认情况下已选择主页微信小程序导航栏开发,这是元素集合的第一个元素。

点击其他页面即可跳转。

其他:

我的:

就是这样。

这是小程序底部导航栏的实现,非常简单〜

好文章,分享给好友!


推荐阅读

关于我们

最新资讯文章