小程序自定义底部导航栏,切换不同页面显示不同tabBar

简介: 小程序自定义底部导航栏,切换不同页面显示不同tabBar

在一个微信小程序中,需要实现一个功能,点击页面某一个按钮,显示不同底部导航栏,实现效果如下

在这里插入图片描述

建立导航栏公共组件

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected == index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected == index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

对应js文件,其中list对应的就是底部导航栏内容

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [
      {
        pagePath: "/pages/index/index",
        text: "首页",
        iconPath: "/images/home.png",
        selectedIconPath: "/images/home_b.png"
      },
      {
        pagePath: "/pages/indexcate/indexcate",
        text: "发现",
        iconPath: "/images/more2.png",
        selectedIconPath: "/images/more2_b.png"
      },
      {
        pagePath: "/pages/mycenter/mycenter",
        text: "我的",
        iconPath: "/images/my.png",
        selectedIconPath: "/images/my_b.png"
      }
    ]
  },
  methods: {
    switchTab(e) {
      let data = e.currentTarget.dataset
      let url = data.path
      wx.switchTab({
        url
      })
      this.setData({
        selected: data.index
      })
    }
  }
})
  • 注意:如需实现 tab 选中态,要在当前页面下,通过 getTabBar 接口获取组件实例,并调用 setData 更新选中态。可参考底部的代码示例。
  • 自定义底部菜单栏需要在每个文件onShow添加对应js代码
onShow: function () {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
  },

切换底部导航栏

  • 其实做这个的时候,我在component组件有创建了一个单独对底部导航栏封装一个组件,
data: {
    selected:0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [
      {
        pagePath: "/shoping/index/index",
        text: "首页",
        iconPath: "/static/images/tabbar/icon-1.png",
        selectedIconPath: "/static/images/tabbar/icon-1-active.png"
      },
      {
        pagePath: "/shoping/shop/caregory/index",
        text: "分类",
        iconPath: "/static/images/tabbar/icon-2.png",
        selectedIconPath: "/static/images/tabbar/icon-2-active.png"
      },
      {
        pagePath: "/shoping/member/cart/index",
        text: "购物车",
        iconPath: "/static/images/tabbar/icon-4.png",
        selectedIconPath: "/static/images/tabbar/icon-4-active.png"
      },
      {
        pagePath: "/shoping/member/index/index",
        text: "会员中心",
        iconPath: "/static/images/tabbar/icon-5.png",
        selectedIconPath: "/static/images/tabbar/icon-5-active.png"
      }
    ]
  },
  • 从每个组件接收一个当前选择的状态
properties: {
    selected: {
      type: Number,
      default:0
    }
  }, 

如果不写这个的话,通过switchTab跳转都会刷新页面,状态都是初始化为默认值了,其中这个selected来判断是当前那个页面

  • 对于这个组件,因为是从另外一个页面跳转另外一个底部,需要在每个导航页面引入这个组件
{
  "usingComponents": {
    "nav-tabar": "/components/shoping-tabbar/index"
  }
}
  • 页面使用,并在当前页面定义selected传递过去
<text>首页</text>
<nav-tabar selected="{{selected}}"></nav-tabar> 

以上就是功能所需要的代码,已经上传github了,可以自行下载,在修改修改,优化优化代码,感觉这样写体验效果不是很好,如果有好的方案,可以留言哈

目录
相关文章
|
8月前
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
10月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
10月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
12月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
724 1
|
12月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
1947 1
|
12月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
515 0
微信小程序:自定义关注公众号组件样式
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
481 12
|
9月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
312 0
|
11月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
209 0
在线课堂+工具组件小程序uniapp移动端源码

热门文章

最新文章