微信小程序:自定义导航栏

2023-11-16

看到有的微信小程序的页面左上角有了个“小房子”,可以返回首页,这是怎么做到的?其实这是微信开放的自定义的自定义导航栏来完成,但是最开始,对于一个页面很多的小程序,其实有点一言难尽,因为你自定义,你可能要所有页面都要添加一遍。

现在小程序可以自定义页面的json,你可以修改自定义某一个页面的导航栏(之前是只能在app.json里定义,而且导致的所有界面都没有导航栏,你要所有界面都要加一遍,即使采用组件的形式,也是一个体力劳动。)。

一下是大概步骤和截图,代码我在github上放着有什么问题可以提出来,可能光靠代码和截图不一定完全行得通,可能你要注意你的设置,或者一些基础的概念不清除导致的问题。

效果图:
在这里插入图片描述

注意点:
适配问题,注意一下刘海屏
标题,中间的title是要可以在页面自定义的,要不然你写一个组件,所有的页面title都是一个,要能在页面传值过去可以自定义

操作步骤
(1)组件
组件好处就是省事,尤其是这种公共部分很多地方都能用到,组件除了可以获取日期等公共函数操作,还可以像这个一样做一个部分,在页面展示出来。

a.定义组件,组件4个部分都要注意
js:可以看一下他的结构和page貌似很像,但是差距还是有的,他的函数没有page那些事件函数。
在这里插入图片描述
json:和page对比,第一个属性很重要的,他是一个组件的生效与否的标志。
在这里插入图片描述
wxml:这个可是你展示给页面上的部分,相当于在页面上把这个贴上去
在这里插入图片描述

wxss:有wxml自然会有wxss的

在这里插入图片描述

(2)引入组件展示
a 页面json配置
引入组件首先在引入组件的页面进行定义,要不然引入不了。还有就是,添加自定义导航栏模式定义。图一引入组件,图二是自定义导航栏(默认得知是default,也就是官方样式)
在这里插入图片描述
b 页面引入
在这里插入图片描述
参考文章:(我这个是进阶版代码去我的github上看吧)
https://www.jianshu.com/p/7393c800ba09
github:
https://github.com/stubborn123/wxStudy/tree/master/navigate
我的公众号:我是坑货
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序:自定义导航栏 的相关文章

随机推荐

  • underlay和overlay? & 传统网络和数据中心网络 ?

    underlay和overlay 百度 Underlay 和 Overlay 是网络架构中两个常用的概念 用于描述不同层次或视角下的网络结构和通信方式 1 Underlay 底层网络 Underlay 是指基础网络层 即物理网络或基础网络架
  • B站马士兵python入门基础版详细笔记(5)

    前言 这是这篇文章是B站学习python入门基础班的视频的第五章内容 主要讲述的是循环结构 主要包括while语句和for in语句 一 range函数 这个函数生成的是一个整数序列 他的返回值是一个迭代器对象 所以直接print它是没有用
  • java gc 次数_JVM的分区+查看GC对象是否存活+3种GC算法+7种垃圾收集器+如何减少GC次数...

    一 JVM的分区 1 程序计数器 私有 程序计数器是一块较小的内存分区 你可以把它看做当前线程所执行的字节码的指示器 在虚拟机的概念模型里 字节码解释器工作时 就是通过改变计数器的值来选择下一条需要执行的字节码指令 程序技术器为线程私有 每
  • UNet3+详解

    目录 1 UNet3 解决的问题 1 UNet 2 UNet 2 UNet3 的创新点 3 UNet3 的结构体 1 编码层 2 解码层 a 跳跃连接 b 分类引导模块 CGM c 特征聚合机制 d 深监督 e 混合损失函数 4 UNet3
  • Supervisor使用备忘

    为什么要用Supervisor 从这里说起 服务器端要将程序以daemon运行 其目的是摆脱控制终端的信号影响 以免进程退出 Daemon化流程 int daemonize pid t pid fork if pid 0 exit 0 if
  • 更改Ansys Workbench的语言的方法

    如果没有学过日文 安装Ansys Workbench后出现如下界面 一定会感到很无助 如何把它改为英文界面呢 按下面步骤来 1 点击第三个菜单 2 再点击下拉菜单中的最后一个菜单 如下 3 在弹出对话框中 点击左边的第三项 图中红色矩形框框
  • 零基础学Java,最开始应该学什么?

    Java的知识面太广了 这里整理了一个思维导图 不是很全面 但足够硬核 先学最重要的 从浅到深 能够让你快速地学好Java 一 两个学习阶段 在介绍如何学好Java前 我们先把学习路线定一下 我把这个过程分成两个阶段 第一阶段 打好基础 先
  • MarkDown 高级操作

    目录 1 图片处理 2 插入音乐 3 插入视频 4 在页面内跳转 5 插入跳转链接 用新的窗口打开 6 设置不同的字体颜色 7 设置不同类型的字体 8 使用标准字体 9 添加背景色 10 多种矩阵形式输入 10 1 不带括号的 10 2 带
  • ue4中Pak文件中挂载的资源名称获取

    在pak文件中 会挂接很多资源 api也在变化 废话不多说 上代码 FPakPlatformFile GetPakPlatformFile FPakPlatformFile pakPlatformFile nullptr auto plat
  • 概念学习—机器学习

    概念学习 介绍 概念学习 假设的一般到特殊序 Find S 寻找极大特殊假设 变型空间和候选消除算法 表示 更简明的表示 关于变型空间和候选消除的说明 候选消除算法是否会收敛到正确的假设 归纳偏置 介绍 定义 概念学习是指从有关某个布尔函数
  • H.264的Slice及Slice类型

    一 基本概念 一个视频图像可编码成一个或更多个条带 每个条带包含整数个宏块 MB 即每个条带至少一个MB 最多时每个条带包含整个图像的宏块 总之 一幅图像中每个条带的宏块数不一定固定 设条带的目的是为了限制误码的扩散和传输 应使编码条带相互
  • 网络安全渗透测试之pingtunnel使用实验

    目录 一 实验环境准备 二 安装pingtunnel 一 在192 168 101 105 web服务器上安装pingtunnel 三 建立ICMP隧道 一 在web服务器上启动pingtunnel 二 在kali上设置转发 三 隧道渗透演
  • 白盒测试(程序流程图)

    白盒测试又称结构测试 透明盒测试 逻辑驱动测试或基于 代码的测试 白盒测试是一种 测试用例设计方法 盒子指的是被测试的 软件 白盒指的是盒子是可视的 你清楚盒子内部的东西以及里面是如何运作的 白盒 法全面了解程序内部逻辑结构 对所有逻辑路径
  • CBC模式解读

    一 什么是CBC模式 CBC模式的全称是Cipher Block Chaining模式 密文分组链接模式 之所以叫这个名字 是因为密文分组像链条一样相互连接在一起 在CBC模式中 首先将明文分组与前一个密文分组进行XOR运算 然后再进行加密
  • LM算法初识

    由于工作内容接触到点云标定 需要用到最小二乘法 所以特意花了点时间研究LM算法 但是由于大学的高等数学忘得差不多了 所以本文从最基本的一些数学概念开始 信赖域法 在最优化算法中 都是要求一个函数的极小值 每一步迭代中 都要求目标函数值是下降
  • canvas系列教程之填充颜色

    艺术离不开色彩 今天咱们来介绍一下填充颜色 体会一下色彩的魅力 填充颜色主要分为两种 基本颜色 渐变颜色 又分为线性渐变与径向渐变 我们一个个来看 填充基本颜色 Canvas fillStyle属性用来设置画布上形状的基本颜色和填充 fil
  • Python + Django4 搭建个人博客(二十):阿里云部署博客项目

    本篇我们将完成我们搭建个人博客的核心功能的最后一篇 部署上线 接下来部分我们将不定期更新一些其他的博客功能 比如 文章栏目 消息通知 用户扩展等小功能模块 目录 准备服务器 安装Xshell 和Xftp 服务器安装软件 安装Mysql 修改
  • vue-loade和vue的版本问题,webpack5

    npm add D vue template compiler 2 6 14 vue loader 15 9 8 const VueLoaderPlugin require vue loader vue加载器 使用node语法获得动态路径
  • Nginx配置文件详细说明

    原创 http www cnblogs com xiaogangqq123 archive 2011 03 02 1969006 html 在此记录下Nginx服务器nginx conf的配置文件说明 部分注释收集与网络 运行用户 user
  • 微信小程序:自定义导航栏

    看到有的微信小程序的页面左上角有了个 小房子 可以返回首页 这是怎么做到的 其实这是微信开放的自定义的自定义导航栏来完成 但是最开始 对于一个页面很多的小程序 其实有点一言难尽 因为你自定义 你可能要所有页面都要添加一遍 现在小程序可以自定