微信小程序的底部菜单栏实现和界面顶部显示

准备工作：

阿里图标库https://www.iconfont.cn/collections/detail?cid=29

在这个网站上下载一些自己要用到的图标，比如人员头像，home主页等一些常用的图标，直接点击下载保存到本地，修改一下命名。

回到项目里，新建一个images文件夹，将刚刚下载好的图标放在文件夹底下备用，将上述起好名字的图标保存到小程序项目目录中新创建的 images 文件夹中，准备工作就做好了。

一、底部菜单栏实现

1、效果图展示

2、代码展示

在根目录中的配置文件 app.json 加入如下配置信息（app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。）

首先建立三个页面（底部需要设计几个菜单就新建几个页面备用）

"pages":["pages/homepages/homepages","pages/publish/publish","pages/mine/mine",],

然后在window代码段下边设置tabBar标签（在）

 "tabBar":{"color":"#121f2f","selectedColor":"#3a6ea5","backgroundColor":"#fff","borderStyle":"white","list":[{"pagePath":"pages/homepages/homepages","iconPath":"images/homepages.png","selectedIconPath":"images/homepages_select.png","text":"首页"},{"pagePath":"pages/publish/publish","iconPath":"images/publish.png","selectedIconPath":"images/publish_select.png","text":"发布"},{"pagePath":"pages/mine/mine","iconPath":"images/mine.png","selectedIconPath":"images/mine_select.png","text":"我的"}]}

最后点击编译就可以出来效果了

3、标签解释

tabBar 指底部的导航配置属性

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

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

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

list 导航配置数组，有几个标签就在list数组中设置几组{ }。

selectedIconPath 选中时图标的路径

iconPath 未选中时图标的路径

pagePath 页面访问地址

text 导航图标下方文字

二、界面顶部显示

1、效果图显示

2、代码实现

对哪一个页面顶部显示，修改对应的.json 文件。

{"usingComponents": {},"navigationBarBackgroundColor": "#489B81","navigationBarTitleText": "首页","navigationBarTextStyle": "white"
}

3、标签解释

navigationBarBackgroundColor：表示顶部背景颜色

navigationBarTitleText：顶部显示字体内容

navigationBarTextStyle：顶部字体颜色

微信小程序的底部菜单栏实现和界面顶部显示相关推荐

html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序之底部弹框预约插件
代码地址如下: http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq. ...
小程序自定义底部菜单栏
问题:小程序的底部菜单栏基本的样式根本不能满足我们的审美要求,所以我们可以通过自己来自定义一套小程序底部栏,可以设置透明背景哟,想要什么样式都可以自己定义,好了,废话不多说,直接上代码! 首先在和pa ...
微信小程序iPhoneX 底部虚拟Home键区域适配方案
微信小程序iPhoneX 底部虚拟Home键区域适配方案为什么要适配? 先看下iPhoneX和之前的iPhone的区别,如下图可以看出主要是顶部和底部多了一些区域,如果页面内容进入该区域,有可能会 ...
微信小程序在底部导航栏使用扫一扫功能【代码可用】
微信小程序在底部导航栏使用扫一扫功能解决方案 uni-app 微信原生代码在家躺着也能遇到奇奇怪怪的需求,这不,需要在微信小程序底部的导航栏中加一个扫一扫功能⭐╮(￣﹏￣)╭⭐. 解决方案在导航 ...
【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...
微信小程序之底部栏tabBar
tabBar是微信小程序的底部导航栏,它是微信自带的一个框架. 微信小程序自定义tabBar的描述 tabBar需要在app.json书写. 这是我的app.json {"pages&quo ...
微信小程序scroll-view底部内容无法完全显示
微信小程序scroll-view底部内容无法完全显示真机调试时,滑动到最底部,松手无法显示最底部的内容,如图: 需要在scroll-view组件内的最后加一个空白组件view在占位,使最后的信息能够 ...

微信小程序的底部菜单栏实现和界面顶部显示

微信小程序的底部菜单栏实现和界面顶部显示相关推荐

最新文章

热门文章