效果图:
实现底部Tab选项,只需要在项目根目录下的app.json下修改
如图:
------------------------------------------------------------------------------------------------------
先介绍一下app.json文件
默认有两个代码块:1、pages 这里注册了当前小程序的所有页面路径2、window 这里用于设置小程序的状态栏、导航条、标题、窗口背景色。 以上两个详细使用参考文档,本文章不做介绍
我们看下app.json提供的另一个配置项:tabBar
tabBar提供一些公有的属性对tab配置:
而针对每一个单独的tab 也有一些属性进行配置:官方示意图:
设定一个需求,假设当前我们有两个tab,一个'主页',一个'我的' , 未选中灰黑色,选择红色。
一、在pages目录下创建两个目录,并创建想要的js、json、wxml、wxss相关文件
名字随意,这里举例:home目录(主页Tab相关),mine目录(我的Tab相关)
二、在根目录下新建一个目录,取名images(随意取),用于存放图片,这里tab需要使用
1、在阿里素材库下载几个,注意tab图片需要下载点击和未点击两种状态下的图片。
三、app.json文件配置
1、在pages属性中配置项目所有的页面路径,我们这个例子就两个,home,mine
pages:[ pages/home/home, pages/mine/mine ]
tabBar:{ color: #333333, selectedColor: #ff0000, backgroundColor: #fff, list:[ { pagePath:pages/home/home, text:主页, iconPath:images/home.png, selectedIconPath:images/home_selected.png }, { pagePath:pages/mine/mine, text:我的, iconPath: images/mine.png, selectedIconPath:images/mine_selected.png } ] }
四、单独页面的配置
这里不再多具体介绍,只添加一个小需求,点击tab切换相关页面,该页面标题要和tab一致,页面内容也和tab一致,用于说明tab效果正确实现。
1、设置单独页面的页面标题,这个需求是在json文件中配置实现的。
官方文档
页面内容搭建(ui绘制代码)是在单独页面路径下的wxml文件中配置实现的。
原文地址:https://www.jb51.cc/weapp/1202139.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。