微信小程序项目实践首页tab选项的实现

正式文件

渲染：

要实现底部的Tab选项，您只需要在项目根目录下的app.json下修改它

如图所示：

先介绍app.json文件

默认情况下有两个代码块：

1、页数

当前小程序的所有页面路径都在这里注册

2、窗户

这用于设置小程序的状态栏、导航栏、标题和窗口背景颜色。

以上两个参考文献都有详细使用，本文不再介绍

让我们看看app.json提供的另一个配置项：tabBar

选项卡栏为选项卡配置提供了一些公共属性：

还为每个单独的选项卡配置了一些属性：

官方示意图：

要实现底部选项卡功能：

设定一个要求，假设我们有两个标签页，一个‘主页’一个‘我的’，选择红色而不是灰色和黑色。

1.在pages目录下创建两个目录，并创建所需的js、json、wxml、wxss相关文件

名字是随机的，这里有例子：主目录(与主页相关的标签页)，我的目录(与我相关的标签页)

其次，在根目录下创建一个名为images的新目录，用于存储图片，其中需要使用tab

1.在阿里素材库下载几个。注意标签图片，需要在点击和被点击状态下下载。

2.将图片资源复制到您自己的目录中以存储图片

三.app.json文件的配置

1.在pages属性中配置项目的所有页面路径。我们有两个例子，家，我的我的

page ' :[' page/home/home '，' page/mine/mine ']2。添加标签栏属性并定义一些状态

根据本文前一部分的解释，配置一些必要的属性

tab bar ' : { ' color ' : ' # 333333 '，' selectedColor': '#ff0000 '，' backgroundColor': '#fff '，' list ' :[{ ' page path ' : ' pages/home/home '，Text':' home page '，' iconpath' :' images/home.png '，' selectedicon path ' : ' images/home _ Selected。单个页面的配置

一页包含js、hson、wxml、wxss等相关文档。

这里没有更具体的介绍，只是添加一个小需求，点击tab即可切换相关页面。页面标题要和tab一致，页面内容也要和tab一致，用来说明tab效果的正确实现。

1.设置单个页面的页面标题。这个需求是在json文件中配置和实现的。

主要需要在json文件的单独页面路径下添加属性：

正式文件

2.在页面上显示与选项卡一致的文本

页面内容构建(ui绘图代码)是在单独的页面路径下的wxml文件中配置和实现的。

正式文件

摘要

以上是边肖给大家介绍的微信小程序项目实践首页tab选项的实现，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！