小程序入门之自定义导航条和底部navigationBar的配置

最新推荐文章于 2024-08-10 07:56:07 发布

银狼嘯月

最新推荐文章于 2024-08-10 07:56:07 发布

阅读量1k

点赞数 1

分类专栏：小程序第一步文章标签：小程序

本文链接：https://blog.csdn.net/xuanyuan_jia/article/details/107672539

版权

本文介绍了如何在小程序中创建自定义导航条，包括删除默认页面、新建页面结构、在app.json配置导航条样式、编写自定义组件及组件的wxml、wxss和js代码。同时讲解了获取手机物理顶部高度的方法，为实现个性化导航条提供了详细步骤。

摘要由CSDN通过智能技术生成

小程序的自制导航条

很多小程序的导航条都是自己写的，拥有自己的风格

准备工作

工具：微信开发者工具
实现效果：
在这里插入图片描述

首先，桌面新建文件夹，然后通过微信开发者工具测试号打开文件夹。
在这里插入图片描述
一开始是这几个文件，红色的是我之前建的，觉得可以写文章记一下就没有重新做了。找到pages里面的两个文件index和log页，删除这两个文件。然后在pages里面新建一个文件夹，取个名字，再在这个文件夹里面新建page
在这里插入图片描述
我建了三个

然后在app.json中就会这样

"pages": [
  "pages/shouye/shouye",
  "pages/rank/rank",
  "pages/profile/profile"
 ],

之前的index和log的两个路径要删掉。
然后在windows同级下加入一段代码

"tabBar": {
  "list": [
   {
    "pagePath": "pages/shouye/shouye",
    "text": "首页",
    "iconPath": "/images/home_normal.png",
    "selectedIconPath": "/images/home_active.png"
   },
   {
    "pagePath": "pages/rank/rank",
    "text": "榜单",
    "iconPath": "/images/subject_normal.png",
    "selectedIconPath": "/images/subject_active.png"
   },
   {
    "pagePath": "pages/profile/profile",
    "text": "我的",
    "iconPath": "/images/profile_normal.png",
    "selectedIconPath": "/images/profile_active.png"
   }
  ]
 },

在这里插入图片描述

pagePath是页面路径，text是下面的字，iconPath是未选中状态的图片，就是那个白色的，最后一个就是选中状态的图片，绿色的。图片放在pages同级下新建一个名为images的文件夹里面。
这个做好了就可以写头部的了，

##自制导航条，先在app.json的windows加一行代码

"navigationStyle":"custom"

下面是总的app.json的代码

{
 "pages": [
  "pages/shouye/shouye",
  "pages/rank/rank",
  "pages/profile/profile"
 ],
 "window": {
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "Weixin",
  "navigationBarTextStyle": "black",
  "navigationStyle":"custom"
 },
 "tabBar": {
  "list": [
   {
    "pagePath": "pages/shouye/shouye",
    "text": "首页",
    "iconPath": "/images/home_normal.png",
    "selectedIconPath": "/images/home_active.png"
   },
   {
    "pagePath": "pages/rank/rank",
    "text": "榜单",
    "iconPath": "/images/subject_normal.png",
    "selectedIconPath": "/images/subject_active.png&