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

原创

于 2019-09-16 15:51:27 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #css

这篇博客介绍了如何在微信小程序中自定义底部导航栏，包括在`app.wxss`和`app.js`中设置全局样式和变量，以及在`index.wxml`和`index.js`中处理点击切换样式。作者提供了详细的步骤和代码示例，同时提到了使用`wx.switchTab` API来解决页面跳转的感官问题，并在`app.json`中配置tabBar。

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

时隔一年多，在更新一下

再次自定义tabbar(推荐)：https://blog.csdn.net/qq_43379916/article/details/120206962

ps：这篇博客就不删了，好歹也是从小白跌跌撞撞写过来了，😆

自定义底部导航需写一个共用模板：（名称自定义）

<template name="nav">      
           <view class="nav_link" bindtap="{
    
    {fn}}">       
                    <button class="defalut_btn {
    
    {current==0?'':'on_cor'}}" size="mini">             
                       <block wx:if="{
    
    {style==0}}">                
                             <image src="{
    
    {icoSrc}}" class="iconfont del_ico idx_ico"></image>               
                             <text wx:if="{
    
    {msg>0}}" class="tip_tip">{
  
  {msg}}</text>                
                             <text class="txt">{
  
  {name}}</text>         
                       </block>          
                       <block wx:if="{
    
    {style==1}}">                   
                             < view class="plus_wp">                
                                    <image src='/pages/images/icon/Theoval.png' class="plus_ico" />               
                             </view>              
                             <text class="txt txt_fb">{
  
  {name}}