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

最新推荐文章于 2024-06-02 19:15:42 发布

chensi_07

最新推荐文章于 2024-06-02 19:15:42 发布

阅读量488

点赞数 5

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/chensi_07/article/details/136389066

版权

本文介绍了如何在微信小程序中使用自定义底部导航栏，以及遇到的跳转问题，通过在特定页面的onShow生命周期方法中设置tabBar的状态来解决多跳转问题。

摘要由CSDN通过智能技术生成

微信小程序官方：自定义 tabBar | 微信开放文档

项目需求需要在底部导航栏直接跳转其他小程序，由于官方文档：wx.navigateToMiniProgram(Object object) | 微信开放文档中使用限制

于是就用了自定义底部导航栏，代码如下：

1、在pages文件夹同级目录创建custom-tab-bar文件夹

index.wxml

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

index.wxss

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  display: flex;
  background: #fff;
  backdrop-filter: blur(40rpx);
  border-radius: 40rpx 40rpx 0 0;
  box-shadow: 0rpx -16rpx 20rpx 0rpx rgba(195,211,237,0.2);
}
.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item .tab-icon {
  width: 54rpx;
  height: 54rpx;
}

.tab-bar-item .tab-name {
  font-size: 20rpx;
}

index.js

Component({
  data: {
    selected: 0,
    color: "#AAB7CA",
    selectedColor: "#3390FF",
    list: [{
      pagePath: "/pages/tabbar-pages/home/home",
      text: "首页",
      iconPath: "/images/tabbar-icons/home.png",
      selectedIconPath: "/images/tabbar-icons/home-selected.png"
    },
    {
      pagePath: "pages/tabbar-pages/other/other",
      text: "民航安检通",
      iconPath: "/images/tabbar-icons/other.png",
      selectedIconPath: "/images/tabbar-icons/other-selected.png"
    },
     {
      pagePath: "/pages/tabbar-pages/mine/mine",
      text: "我的",
      iconPath: "/images/tabbar-icons/mine.png",
      selectedIconPath: "/images/tabbar-icons/mine-selected.png"
    }]
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      if(data.text === '民航安检通'){
        wx.navigateToMiniProgram({
          appId: 'wx8fe19b0d96bfd5a8',
        })
      }else{
        wx.switchTab({url})
      }
    }
  }
})

index.json

{
  "component": true
}

2、app.json里配置tabBar:true

自定义导航栏会出现跳转失灵的问题，可能会跳转两次。

解决方法如下：

在使用导航栏的页面的onShow中添加如下代码：

 onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0  // 0-首页  1-民航安检通  2-我的
      })
    }
  },