微信小程序:设置底部导航栏目
来源:互联网 发布:百度云登录网络异常1 编辑:程序博客网 时间:2024/05/17 03:35
微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家。
好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的。
我们先来看个效果图
这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个。
那他们是怎么出现怎么着色的呢?两步就搞定!
1. 图标准备
阿里图标库 http://www.iconfont.cn/collections/show/29
我们进入该网站,鼠标滑到一个喜欢的图标上面 点击下方的 下载按钮
在弹出框中 选择了 俩个不同颜色的 图标 选择64px大小即可,我选择的是png 然后下载下来 起上别名
将上述起好名字的图标 保存到 小程序 项目目录中 新创建的 images 文件夹中,准备工作就做好了
2. 更改配置文件
我们找到项目根目录中的配置文件 app.json 加入如下配置信息
解释一下 对应的属性信息
tabBar 指底部的 导航配置属性
color 未选择时 底部导航文字的颜色
selectedColor 选择时 底部导航文字的颜色
borderStyle 底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条)
list 导航配置数组
selectedIconPath 选中时 图标路径
iconPath 未选择时 图标路径
pagePath 页面访问地址
text 导航图标下方文字
如果要改变更详细的样式 请参看
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
阅读全文
0 0
- 微信小程序设置底部导航栏目方法
- 微信小程序:设置底部导航栏目
- 微信小程序实现底部导航栏目示例
- 微信小程序 设置底部导航
- 微信小程序四(设置底部导航)
- 微信小程序怎么设置底部导航
- 微信小程序四(设置底部导航)
- 微信小程序之四(设置底部导航)
- 微信小程序底部导航Tabbar
- 网站导航栏目焦点设置
- 微信小程序把玩(三)tabBar底部导航
- 微信小程序如何实现底部导航栏
- PHP的栏目导航程序
- PHP的栏目导航程序
- React Native 的顶部导航栏和底部导航栏目
- 微信小程序底部导航加顶部table选项卡
- 微信小程序tabBar底部导航 不显示问题解析
- 关于微信小程序动态改变底部导航栏问题
- spring实现注册(邮箱验证+有效时间)
- JVM学习笔记(5)-JVM参数
- Mybatis -处理clob类型数据
- 《深入理解java虚拟机》读书笔记六 【调优案例分析】
- POJ 2689 Prime Distance【大区间素数筛选】【埃氏筛法】【经典题】
- 微信小程序:设置底部导航栏目
- [HDU] 2546
- Scala样例类详细解释
- 机器学习精简教程之十——用scikit-learn做聚类分析
- el-input监听事件失效
- 【HDU 1509】Windows Message Queue(栈-水题)
- CSU-ACM2017暑期训练7-模拟&&贪心 A
- 程序memo
- yyy