微信小程序-自定义底部导航

最新推荐文章于 2025-06-25 09:35:18 发布

原创

最新推荐文章于 2025-06-25 09:35:18 发布 · 2.1w 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #自定义底部导航

本文介绍了如何在微信小程序中实现自定义底部导航，包括前期的软件环境准备，如微信开发者工具的下载，以及自定义nav.wxml、index.wxml的代码实现和index.js中的逻辑处理。通过本文，读者可以学习到如何设置和管理用户自定义的底部导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码地址如下：
http://www.demodashi.com/demo/14258.html

一、前期准备工作

软件环境：微信开发者工具
官方下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。

实现用户自定义底部导航

2、案例目录结构

二、程序实现具体步骤

1.自定义nav.wxml代码

<template name="nav">
      <view class="nav_link" bindtap="{
  
  {fn}}">
        <button class="defalut_btn {
  
  {current== 0 ? '' : 'on_cor'}}">
          <block wx:if="{
  
  {style == 0}}">
                <icon class="iconfont {
  
  {ico}} del_ico idx_ico