微信小程序入门二：底部导航tabBar

小程序底部导航栏组件tabBar，可以参考下官方的API：tabBar

先看代码

//app.json
{"pages":["pages/index/index","pages/share/share","pages/user/user"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "微信小程序入门二：底部导航tabBar","navigationBarTextStyle":"black"},"tabBar": {"color": "8f9095","selectedColor": "7acfa6","borderStyle": "black","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "images/home1.png","selectedIconPath": "images/home2.png"},{"pagePath": "pages/share/share","text": "发现","iconPath": "images/clud1.png","selectedIconPath": "images/clud2.png"},{"pagePath": "pages/user/user","text": "我","iconPath": "images/user1.png","selectedIconPath": "images/user2.png"}]}
}

tabBar 指底部的导航配置属性

color 未选择时底部导航文字的颜色

selectedColor 选择时底部导航文字的颜色

borderStyle 底部导航边框的样色（注意这里如果没有写入样式会导致导航框上边框会出现默认的浅灰色线条）

list 导航配置数组

selectedIconPath 选中时图标路径

iconPath 未选择时图标路径

pagePath 页面访问地址

text 导航图标下方文字

注意tabBar要求底栏至少有两个。

源码下载：https://download.csdn.net/download/ber_bai/10556065

微信小程序入门二：底部导航tabBar相关推荐

微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...
html底部导航栏图标切换,【微信小程序】自定义底部导航栏，切换不同页面显示不同tabbar...
https://blog.csdn.net/small_lack/article/details/80959278 在一个微信小程序中想要用到两种不同的tabbar样式,需要在app.js中自定义,在 ...
微信小程序入门二: 条件、遍历、网络请求、获取本地图片
实例内容条件渲染数据遍历网络请求获取本地图片实例一: 条件渲染如果motto为Hello World,则输出你好世界,否则原样输出. 这里是分支条件判断,直接在视图文件里修改,修改inde ...
微信小程序兼容ios底部导航栏边距
css代码 padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
微信小程序——不同角色的导航栏显示不同
文章目录问题描述解决方法代码实现底部导航栏排查员存在的问题问题描述微信小程序的原生底部导航栏限制了数量(3-5个)且不能根据你的不用用户进行动态的底部导航栏变化,无法适应多种用户从 ...
vue微信小程序开发(二)---页面以及导航
vue微信小程序开发(二)-菜单以及页面这里写目录标题 vue微信小程序开发(二)---菜单以及页面图标的选择创建并注册页面底部导航大家好,我是代码哈士奇,是一名软件学院网络工程的学生, ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战文章目录微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
微信小程序入门与实战（七月）
微信小程序入门与实战(七月) 第1章初识微信小程序第2章小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...

微信小程序入门二：底部导航tabBar

微信小程序入门二：底部导航tabBar相关推荐

最新文章

热门文章