当前位置： 首页 > article >正文

微信小程序自定义导航栏实现指南

article 2026/3/27 11:16:00

文章目录

  • 微信小程序自定义导航栏实现指南
    • 一、自定义导航栏的需求分析
    • 二、代码实现
      • 1. WXML 结构
      • 2. WXSS 样式
        • 样式解析：
      • 3. JavaScript 逻辑
    • 三、完整代码示例
    • 四、注意事项与优化建议
    • 五、总结

微信小程序自定义导航栏实现指南

在微信小程序开发中，默认的导航栏样式可能无法满足所有场景的需求，尤其是在需要高度定制化设计时，自定义导航栏成为了一个常见选择。本文将通过一个实际案例，详细讲解如何在微信小程序中实现一个简洁且实用的自定义导航栏，包括返回按钮和标题的布局与样式设计。以下是实现步骤和代码解析。

一、自定义导航栏的需求分析

在一个产品比对页面中，我们需要一个固定在顶部的导航栏，包含以下功能：

  1. 返回按钮：位于左侧，点击后返回上一页。
  2. 标题：居中显示页面名称，例如“比对进程”。
  3. 样式：导航栏固定在页面顶部，背景为白色，兼容不同设备。

基于这些需求，我们将使用 WXML 编写结构，WXSS 定义样式，并通过 JavaScript 实现返回功能。

二、代码实现

1. WXML 结构

自定义导航栏的核心是使用 <view> 组件搭建布局。以下是提取出的导航栏代码：

<!-- 自定义导航栏 -->
<view class="custom-nav"><view class="back-btn" bindtap="goBack"><view class="arrow"></view></view><view class="nav-title">比对进程</view>
</view>
  • custom-nav：导航栏的根容器。
  • back-btn：返回按钮区域，通过 bindtap 绑定点击事件 goBack。
  • arrow：返回箭头的图形，使用纯 CSS 绘制。
  • nav-title：导航栏标题，居中显示。

2. WXSS 样式

导航栏的样式设计需要考虑固定定位、居中对齐和适配性。以下是完整的样式代码：

.custom-nav {position: fixed;top: 0;left: 0;right: 0;height: 180rpx;background-color: #FFFFFF;display: flex;align-items: center

相关文章：

微信小程序自定义导航栏实现指南

文章目录 微信小程序自定义导航栏实现指南一、自定义导航栏的需求分析二、代码实现1. WXML 结构2. WXSS 样式样式解析：3. JavaScript 逻辑三、完整代码示例四、注意事项与优化建议五、总结微信小程序自定义导航栏实现指南 在微信小程序开发中，默认的导航栏样式可能无法满足所…...

编程日记 2025/3/24 19:52:03

(十 六)趣学设计模式 之 责任链模式！

目录 一、 啥是责任链模式&#xff1f;二、 为什么要用责任链模式&#xff1f;三、 责任链模式的实现方式四、 责任链模式的优缺点五、 责任链模式的应用场景六、 总结 &#x1f31f;我的其他文章也讲解的比较有趣&#x1f601;&#xff0c;如果喜欢博主的讲解方式&#xff0c;…...

编程日记 2026/3/18 7:29:03

20250225-代码笔记03-class CVRPModel AND other class

文章目录 前言一、class CVRPModel(nn.Module):__init__(self, **model_params)函数功能函数代码 二、class CVRPModel(nn.Module):pre_forward(self, reset_state)函数功能函数代码 三、class CVRPModel(nn.Module):forward(self, state)函数功能函数代码 四、def _get_encodi…...

编程日记 2026/3/27 3:22:14

面试常问的压力测试问题

性能测试作为软件开发中的关键环节&#xff0c;确保系统在高负载下仍能高效运行。压力测试作为性能测试的重要类型&#xff0c;旨在通过施加超出正常负载的压力&#xff0c;观察系统在极端条件下的表现。面试中&#xff0c;相关问题常被问及&#xff0c;包括定义、重要性、与负…...

编程日记 2026/3/26 14:59:41

Python——365天学习规划

文章目录 1. 第一阶段&#xff1a;Python基础&#xff08;Day 1-60&#xff09; 1.1 Week 1-2&#xff1a;基础语法 1.1.1 Day 1-3&#xff1a;变量、数据类型、运算符、输入输出 1.1.2 Day 4-7&#xff1a;条件语句&#xff08;if-elif-else&#xff09; 1.1.3 Day 8-14&…...

编程日记 2025/3/27 2:13:30

河南理工XCPC萌新选拔赛

A 树之荣荣 青梅熙熙 树之荣荣 青梅熙熙 这个题是一个经典的博弈问题。我们可以考虑一种情况&#xff0c;就是你每一次都会取一个。那么最后一个你肯定不能取。所以我们可以考虑减去一个后的值。判断它的和是奇数还是偶数即可。 int n; cin >> n;int s 0;for (int i 1;…...

编程日记 2025/3/27 1:24:08

设计模式|策略模式 Strategy Pattern 详解

目录 一、策略模式概述二、策略模式的实现2.1 策略接口2.2 具体策略类2.3 上下文类2.4 客户端代码2.5 UML类图2.6 UML时序图 三、优缺点3.1 ✅优点3.2 ❌ 缺点 四、最佳实践场景4.1 适合场景描述4.2 具体场景 五、扩展5.1 继承复用机制和复合策略5.2 对象管理&#xff1a;优化策…...

编程日记 2025/3/24 21:45:36

Wireshark 插件开发实战指南

Wireshark 插件开发实战指南 环境搭建流程图 #mermaid-svg-XpNibno7BIyfzNn5 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-XpNibno7BIyfzNn5 .error-icon{fill:#552222;}#mermaid-svg-XpNibno7BIyfzNn5 .error-t…...

编程日记 2025/3/25 5:54:22

使用Java构建高效的Web服务架构

使用Java构建高效的Web服务架构 随着互联网技术的飞速发展&#xff0c;Web服务在现代应用中扮演着至关重要的角色。尤其是在企业级应用中&#xff0c;如何构建一个高效、可扩展且易维护的Web服务架构&#xff0c;成为了开发者和架构师面临的一项重要挑战。Java作为一种成熟、稳…...

编程日记 2026/3/26 4:13:41

《Python实战进阶》No 10：基于Flask案例的Web 安全性：防止 SQL 注入、XSS 和 CSRF 攻击

第10集&#xff1a;Web 安全性&#xff1a;防止 SQL 注入、XSS 和 CSRF 攻击 在现代 Web 开发中&#xff0c;安全性是至关重要的。无论是用户数据的保护&#xff0c;还是系统稳定性的维护&#xff0c;开发者都需要对常见的 Web 安全威胁有深刻的理解&#xff0c;并采取有效的防…...

编程日记 2026/3/26 5:26:45

蓝桥备赛（六）- C/C++输入输出

一、OJ题目输入情况汇总 OJ&#xff08;online judge&#xff09; 接下来会有例题 &#xff0c; 根据一下题目 &#xff0c; 对这些情况进行分析 1.1 单组测试用例 单在 --> 程序运行一次 &#xff0c; 就处理一组 练习一&#xff1a;计算 (ab)/c 的值 B2009 计算 (ab)/c …...

编程日记 2026/3/26 23:29:07

企微审批中MySQL字段TEXT类型被截断的排查与修复实践

在MySQL中&#xff0c;TEXT类型字段常用于存储较大的文本数据&#xff0c;但在一些应用场景中&#xff0c;当文本内容较大时&#xff0c;TEXT类型字段可能无法满足需求&#xff0c;导致数据截断或插入失败。为了避免这种问题&#xff0c;了解不同文本类型&#xff08;如TEXT、M…...

编程日记 2026/3/25 3:06:11

[ISP] AE 自动曝光

相机通过不同曝光参数&#xff08;档位快门时间 x 感光度 x 光圈大小&#xff09;控制进光量来完成恰当的曝光。 自动曝光流程大概分为三部分&#xff1a; 1. 测光&#xff1a;点测光、中心测光、全局测光等&#xff1b;通过调整曝光档位使sensor曝光在合理的阈值内&#xff0…...

编程日记 2026/3/26 21:13:40

小程序画带圆角的圆形进度条

老的API <canvas id"{{canvasId}}" canvas-id"{{canvasId}}" style"opacity: 0;" class"canvas"/> startDraw() {const { canvasId } this.dataconst query this.createSelectorQuery()query.select(#${canvasId}).bounding…...

编程日记 2026/3/26 11:16:07

16. LangChain实战项目2——易速鲜花内部问答系统

需求简介 易束鲜花企业内部知识库如下&#xff1a; 本实战项目设计一个内部问答系统&#xff0c;基于这些内部知识&#xff0c;回答内部员工的提问。 在前面课程的基础上&#xff0c;需要安装的依赖包如下&#xff1a; pip install docx2txt pip install qdrant-client pip i…...

编程日记 2026/3/26 13:42:57

代码的解读——自用

代码来自&#xff1a;https://github.com/ChuHan89/WSSS-Tissue?tabreadme-ov-file 借助了一些人工智能 run_pipeline.sh 功能总结 该脚本用于执行一个 弱监督语义分割&#xff08;WSSS&#xff09; 的完整流程&#xff0c;包含三个阶段&#xff1a; Stage1&#xff1a;训…...

编程日记 2025/5/18 23:11:33

蓝桥杯试题：DFS回溯

一、题目要求 输入一个数组n&#xff0c;输出1到n的全排列 二、代码展示 import java.util.*;public class ikun {static List<List<Integer>> list new ArrayList<>();public static void main(String[] args) { Scanner sc new Scanner(System.in);…...

编程日记 2025/3/26 1:35:01

FPGA开发，使用Deepseek V3还是R1（8）：FPGA的全流程（简略版）

以下都是Deepseek生成的答案 FPGA开发&#xff0c;使用Deepseek V3还是R1&#xff08;1&#xff09;&#xff1a;应用场景 FPGA开发&#xff0c;使用Deepseek V3还是R1&#xff08;2&#xff09;&#xff1a;V3和R1的区别 FPGA开发&#xff0c;使用Deepseek V3还是R1&#x…...

编程日记 2026/3/25 5:06:31

一个py文件搞定mysql查询+Json转换+表数据提取+根据数据条件生成excel文件+打包运行一条龙

import os import argparse import pymssql import json import pandas as pd from datetime import datetime from pandas.io.formats.excel import ExcelFormatter import openpyxl# 投注类型映射字典 BET_MAPPING {1: WIN, 2: PLA, 3: QIN, 4: QPL,5: DBL, 6: TCE, 7: QTT,…...

编程日记 2025/3/26 8:31:30

微服务学习（1）：RabbitMQ的安装与简单应用

目录 RabbitMQ是什么 为什么要使用RabbitMQ RabbitMQ的安装 RabbitMQ架构及其对应概念 队列的主要作用 交换机的主要作用 RabbitMQ的应用 通过控制面板操作&#xff08;实现收发消息&#xff09; RabbitMQ是什么 RabbitMQ是一个开源的消息队列软件&#xff08;消息代理…...

编程日记 2026/3/26 14:34:46

【RAG】Embeding 和 Rerank学习笔记

Q: 现在主流Embeding模型架构 在RAG&#xff08;Retrieval-Augmented Generation&#xff09;系统中&#xff0c;嵌入模型&#xff08;Embedding Model&#xff09; 是检索阶段的核心组件&#xff0c;负责将查询&#xff08;Query&#xff09;和文档&#xff08;Document&#…...

编程日记 2026/1/7 12:47:17

【Delphi】如何解决使用webView2时主界面置顶，而导致网页选择文件对话框被覆盖问题

一、问题描述&#xff1a; 在Delphi 中使用WebView2控件&#xff0c;如果预先把主界面置顶&#xff08;Self.FormStyle : fsStayOnTop;&#xff09;&#xff0c;此时&#xff0c;如果在Web页面中有使用&#xff08;<input type"file" id"fileInput" acc…...

编程日记 2026/1/11 5:01:14

【量化金融自学笔记】--开篇.基本术语及学习路径建议

在当今这个信息爆炸的时代&#xff0c;金融领域正经历着一场前所未有的变革。传统的金融分析方法逐渐被更加科学、精准的量化技术所取代。量化金融&#xff0c;这个曾经高不可攀的领域&#xff0c;如今正逐渐走进大众的视野。它将数学、统计学、计算机科学与金融学深度融合&…...

编程日记 2025/4/22 4:49:39

iOS 使用消息转发机制实现多代理功能

在iOS开发中&#xff0c;我们有时候会用到多代理功能&#xff0c;比如我们列表的埋点事件&#xff0c;需要我们在列表的某个特定的时机进行埋点上报&#xff0c;我们当然可以用最常见的做法&#xff0c;就是设置代理实现代理方法&#xff0c;然后在对应的代理方法里面进行上报&…...

编程日记 2025/3/26 1:33:29

16.3 LangChain Runnable 协议精要：构建高效大模型应用的核心基石

LangChain Runnable 协议精要：构建高效大模型应用的核心基石 关键词：LCEL Runnable 协议、LangChain 链式开发、自定义组件集成、流式处理优化、生产级应用设计 1. Runnable 协议设计哲学与核心接口 1.1 协议定义与类结构 #mermaid-svg-PlmvpSDrEUrUGv2p {font-family:&quo…...

编程日记 2026/1/1 5:20:55

Starrocks入门（二）

1、背景&#xff1a;考虑到Starrocks入门这篇文章&#xff0c;安装的是3.0.1版本的SR&#xff0c;参考&#xff1a;Starrocks入门-CSDN博客 但是官网的文档&#xff0c;没有对应3.0.x版本的资料&#xff0c;却有3.2或者3.3或者3.4或者3.1或者2.5版本的资料&#xff0c;不要用较…...

编程日记 2026/3/24 16:04:16

【北京迅为】itop-3568 开发板openharmony鸿蒙烧写及测试-第1章 体验OpenHarmony—烧写镜像

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…...

编程日记 2026/3/26 10:28:20

Electron一小时快速上手

1. 什么是 Electron? Electron 是一个跨平台桌面应用开发框架&#xff0c;开发者可以使用 HTML、CSS、JavaScript 等 Web 技术来构建桌面应用程序。它的本质是结合了 Chromium 和 Node.js&#xff0c;现在广泛用于桌面应用程序开发。例如&#xff0c;以下桌面应用都使用了 El…...

编程日记 2026/3/24 11:01:13

算法004——盛最多水的容器

力扣——盛最多水的容器点击即可跳转 当我们选择1号线和8号线时&#xff0c;下标为 1 和 8 形成容器的容积的高度是由 较矮的决定的&#xff0c;即下标为 8 的位置&#xff1b; 而宽度则是 1到8 之间的距离&#xff0c;为 8-17&#xff0c;此时容器的容积为 7 * 7 49。 当我…...

编程日记 2026/3/25 12:28:17

Java Web-Filter

Filter 在 Java Web 开发中&#xff0c;Filter&#xff08;过滤器&#xff09;是 Servlet 规范中的一个重要组件&#xff0c;它可以对客户端与服务器之间的请求和响应进行预处理和后处理。以下从多个方面详细介绍 Java Web 中的 Filter&#xff1a; 一、概念和作用 概念&…...

编程日记 2026/3/26 1:11:47