小程序实践(一):主页tab选项实现
2018-07-03 01:25:52来源:博客园 阅读 ()
官方文档
效果图:
实现底部Tab选项,只需要在项目根目录下的app.json下修改
如图:
------------------------------------------------------------------------------------------------------
先介绍一下app.json文件
默认有两个代码块: 1、pages 这里注册了当前小程序的所有页面路径 2、window 这里用于设置小程序的状态栏、导航条、标题、窗口背景色。 以上两个详细使用参考文档,本文章不做介绍
我们看下app.json提供的另一个配置项:tabBar
tabBar提供一些公有的属性对tab配置:
而针对每一个单独的tab 也有一些属性进行配置:
官方示意图:
------------------------------------------------------------------------------------------------------
具体实现底部Tab功能:
设定一个需求,假设当前我们有两个tab,一个'主页',一个'我的' , 未选中灰黑色,选择红色。
一、在pages目录下创建两个目录,并创建想要的js、json、wxml、wxss相关文件
名字随意,这里举例:home目录(主页Tab相关),mine目录(我的Tab相关)
二、在根目录下新建一个目录,取名images(随意取),用于存放图片,这里tab需要使用
1、在阿里素材库下载几个,注意tab图片需要下载点击和未点击两种状态下的图片。
2、讲图片资源复制到自己建的用于存图片的目录下
三、app.json文件配置
1、在pages属性中配置项目所有的页面路径,我们这个例子就两个,home,mine
"pages":[ "pages/home/home", "pages/mine/mine" ]
2、添加tabBar 属性 , 定义一些状态
根据文章前面部分讲解,进行一些必要属性的配置
"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" } ] }
{ "pages":[ "pages/home/home", "pages/mine/mine" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "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" } ] } }
四、单独页面的配置
一个页面包含js、hson、wxml、wxss等相关文件。
这里不再多具体介绍,只添加一个小需求,点击tab切换相关页面,该页面标题要和tab一致,页面内容也和tab一致,用于说明tab效果正确实现。
1、设置单独页面的页面标题,这个需求是在json文件中配置实现的。
主需要在单独页面路径下的json文件中添加属性:
官方文档
2、在页面中显示与tab一致的文字
页面内容搭建(ui绘制代码)是在单独页面路径下的wxml文件中配置实现的。
官方文档
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:大专生自学web前端前前后后
- 如此沙雕的代码注释,原来程序员都是段子手 2020-06-08
- 还在羡慕程序员工资高吗?看完这篇前端学习计划,你也可以拿 2020-05-23
- 想成为一个高薪WEB前端程序员,这些书籍你要看 2020-05-22
- 1W2以下前端程序员该如何面对现实?我这有一套让你提升的方 2020-05-22
- 在web开发中,为什么前端比后端更得到转行程序员的青睐?必 2020-05-15
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash