这篇文章将为大家详细讲解有关小程序怎样实现主页的标签选项功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<>强效果图:
<强>实现底部标签选项,只需要在项目根目录下的应用。json下修改
如图:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<强>先介绍一下应用。json文件
我们看下应用。json提供的另一个配置项:tabBar
tabBar提供一些公有的属性对选项卡配置:
<强>具体实现底部标签功能:
<强>设定一个需求,假设当前我们有两个标签,一个& # 39;主页& # 39;,一个& # 39;我的& # 39;,未选中灰黑色,选择红色。
<强>一、在页目录下创建两个目录,并创建想要的js, json, wxml, wxs相关文件
名字随意,这里举例:家里目录(主页选项卡相关),我目录(我的标签相关)
<强>二,在根目录下新建一个目录,取名图像(随意取),用于存放图片,这里标签需要使用
1,在阿里素材库下载几个,注意标签图片需要下载点击和未点击两种状态下的图片。
2,讲图片资源复制到自己建的用于存图片的目录下
<强>三、应用。json文件配置
1,在页面属性中配置项目所有的页面路径,我们这个例子就两个,回家,我的
,2,添加tabBar属性,定义一些状态
根据文章前面部分讲解,进行一些必要属性的配置
<强>四、单独页面的配置
<强> 一个页面包含js, hson, wxml, wxs等相关文件。
<强>,,,这里不再多具体介绍,只添加一个小需求,点击选项卡切换相关页面,该页面标题要和标签一致,页面内容也和标签一致,用于说明标签效果正确实现。
,,,1,设置单独页面的页面标题,这个需求是在json文件中配置实现的。
主需要在单独页面路径下的json文件中添加属性:
,,,,,
官方文档
2,在页面中显示与标签一致的文字
,页面内容搭建(ui绘制代码)是在单独页面路径下的wxml文件中配置实现的。
