php底部导航栏,微信小程序之底部导航栏目开发（附代码）

这篇文章主要介绍了微信小程序之底部导航栏目开发(附代码)的相关资料，微信小程序底部想要有一个漂亮的导航栏目，不知道怎么制作，于是百度找到了本篇文章，分享给大家,需要的朋友可以参考下

微信小程序底部导航栏目开发

我们先来看个效果图

这里，我们添加了三个导航图标，因为我们有三个页面，微信小程序最多能加5个。

那他们是怎么出现怎么着色的呢？两步就搞定！

1. 图标准备

我们进入该网站，鼠标滑到一个喜欢的图标上面点击下方的下载按钮

在弹出框中选择了俩个不同颜色的图标选择64px大小即可，我选择的是png 然后下载下来起上别名

将上述起好名字的图标保存到小程序项目目录中新创建的 images 文件夹中，准备工作就做好了

2. 更改配置文件

我们找到项目根目录中的配置文件 app.json 加入如下配置信息

"tabBar": {

"color": "#a9b7b7",

"selectedColor": "#11cd6e",

"borderStyle":"white",

"list": [{

"selectedIconPath": "images/111.png",

"iconPath": "images/11.png",

"pagePath": "pages/index/index",

"text": "首页"

}, {

"selectedIconPath": "images/221.png",

"iconPath": "images/22.png",

"pagePath": "pages/logs/logs",

"text": "日志"

}, {

"selectedIconPath": "images/331.png",

"iconPath": "images/33.png",

"pagePath": "pages/test/test",

"text": "开心测试"

}]

解释一下对应的属性信息

tabBar 指底部的导航配置属性

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

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

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

list 导航配置数组

selectedIconPath 选中时图标路径

iconPath 未选择时图标路径

pagePath 页面访问地址

text 导航图标下方文字

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

php底部导航栏,微信小程序之底部导航栏目开发（附代码）相关推荐

php 类似微信下拉菜单,微信小程序实现下拉框（附代码）
微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果下面来看一下代码: 首先WXML {{selectData[index]}} {{item}} 然后WXSS(如 ...
微信小程序授权登录全过程解析（附代码）
今天小编对于微信小程序的登录功能比较感兴趣,也是由于工作需要,就大概研究了一下. 这里先附一张小程序的登陆整体流程图. 整体流程: 微信端点击登录按钮后会去调用 wx.login接口,如果接口调用成功 ...
（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
微信小程序在底部导航栏使用扫一扫功能【代码可用】
微信小程序在底部导航栏使用扫一扫功能解决方案 uni-app 微信原生代码在家躺着也能遇到奇奇怪怪的需求,这不,需要在微信小程序底部的导航栏中加一个扫一扫功能⭐╮(￣﹏￣)╭⭐. 解决方案在导航 ...
微信小程序实现底部导航栏tabbar
参考链接: (1)微信小程序底部导航Tabbar https://www.cnblogs.com/huangjialin/p/6278429.html (2)小程序自定义tabbar实现中间图标突出效 ...
微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏效果图: wxml:  <view class="navbar"><text wx:for="{{na ...
微信小程序之底部栏tabBar
tabBar是微信小程序的底部导航栏,它是微信自带的一个框架. 微信小程序自定义tabBar的描述 tabBar需要在app.json书写. 这是我的app.json {"pages&quo ...
微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）
设置标题栏标题栏window 在app.json文件里面,通过window对象里面的属性进行设置示例: app.json: 运行: 设置导航栏导航栏TabBar 如果我们的小程序是一个多 tab ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...

php底部导航栏,微信小程序之底部导航栏目开发（附代码）

php底部导航栏,微信小程序之底部导航栏目开发（附代码）相关推荐

最新文章

热门文章