小程序自定义菜单Navbar

最新推荐文章于 2025-03-28 16:47:13 发布

静墨客

最新推荐文章于 2025-03-28 16:47:13 发布

阅读量1.8k

点赞数 1

分类专栏：小程序

静墨客

本文链接：https://blog.youkuaiyun.com/weixin_42547701/article/details/104995601

版权

前言：采用模板template格式进行自定义所需要的菜单，以及可以根据不同的需求在同一个小程序中显示不一样的菜单navbar

效果对比图：

效果对比图

1.定义Navbar格式（在根目录下新增一个.wxml文件）

<template name="navbar">
    <view class="tabBar_box" style="background-color:{
  {tabBar.backgroundColor}}; {
  {tabBar.position == 'top' ? 'top:0' : 'bottom:0'}}；position:fixed;bottom:0;">
        <block wx:for="{
  {tabBar.list}}" wx:for-item="item" wx:key="nav">
            <navigator class="tabBar_nav" url="{
  {item.pagePath}}" style="width:{
  {1/tabBar.list.length*100}}%; " open-type="redirect" bindtap="changeTabBar">
                <image class="tabBar_icon" src="{
  {item.select