小程序自定义底部导航栏,切换不同页面显示不同tabBar-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

小程序自定义底部导航栏,切换不同页面显示不同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了,可以自行下载,在修改修改,优化优化代码,感觉这样写体验效果不是很好,如果有好的方案,可以留言哈

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章