微信小程序（底部导航）

底部导航：

在app.json中包含了全局的配置

{"pages": ["pages/index/index","pages/logs/logs","pages/wlist/wlist"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#F5F5F5","navigationBarTitleText": "weixin","navigationBarTextStyle": "black"},"tabBar": {"color": "#A9A9A9","selectedColor": "","backgroundColor": "#F5F5F5","list": [{"pagePath": "pages/index/index","iconPath": "image/icon_home.png","selectedIconPath": "image/icon_home_selected.png","text": "首页"},{"pagePath": "pages/wlist/wlist","iconPath": "image/icon_cate.png","selectedIconPath": "image/icon_cate_selected.png","text": "列表"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

其中

Pages对应的是不同的界面在全局json文件中 pages里的首个代码就为首页这里的首页就是index

window代表的是窗口外观

而我们需要用到的底部导航就是 tarbag

color代表未选中的颜色 selectedcolor表示选中此项后的颜色 backgroundcolor就是背景颜色

颜色这里只支持16进制 API 颜色

颜色可以从上面对照

list为开了一个数组存放底下的交互

"pagePath": "pages/index/index",
"iconPath": "image/icon_home.png",
"selectedIconPath": "image/icon_home_selected.png",
"text": "首页"

pagepath 后面跟的为点击后跳转的界面如果没有跳转的界面存在会报错

iconpath 为还没选择此项时候的图片路径

selecticonpath 为选择此项后的图片路径

text 为图片底下的文字

图片可以在项目的工程文件下建立一个image 里面存放所需的png

保存编译之后模拟器就会显示底部导航栏

需要多少个就在list里面放几个

微信小程序（底部导航）相关推荐

php底部导航栏,关于微信小程序底部导航栏目的开发
这篇文章主要介绍了微信小程序底部导航栏目开发资料的相关资料,微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家,需要的朋友可以参考下微信小程序底部导航栏目 ...
微信小程序底部导航---tabBar
微信小程序底部导航-tabBar 示例图如下: 在app,json页面pages配置中代码如下: "pages": ["pages/home/home",&q ...
微信小程序底部导航Tabbar
1,底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 2,对于底部导航栏,小程序 ...
小程序tabbar能放分包路径吗_微信小程序底部导航Tabbar
底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...
微信小程序-底部导航栏
注册一个小程序appId,新建自己的项目,了解小程序的框架结构. 制作底部导航栏时,添加导航按钮关联页面,注意配置在app.json配置page时,要把第一个导航按钮页面放在第一个位,不然其他页面会覆 ...
自定义微信小程序底部导航栏
效果目录 1.在根目录创建custom-tab-bar文件夹 (1)index.js Component({data: {selected: 0,color: "#59595b" ...
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
自定义微信小程序头部导航栏自定义微信小程序头部导航栏,有几种方式方式一 {"navigationStyle": "custom" // 将navigatio ...
微信小程序底部菜单详解
微信小程序底部菜单详解只需要在app.json里面修改配置,即可 {"pages":["pages/index/index","pages/logs ...
微信小程序浮动按钮_操作按钮悬浮固定在微信小程序底部的实现代码
本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单,还不会的朋友一起跟着小编学习一下吧,希望对你们有所帮助. 常见的有加入购物车按钮.结算按钮.收货列表添加地址按钮. 以收货地 ...
按钮悬浮固定在微信小程序底部
http://mydown.yesky.com/news/87296687.html 本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单,还不会的朋友一起跟着小编学习一下吧,希 ...

微信小程序（底部导航）

底部导航：

微信小程序（底部导航）相关推荐

最新文章

热门文章