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

微信小程序 是支持自定义导航栏的,可查看微信小程序官方文档,学习自定义tabBar的使用

1.创建自定义导航栏 目录和文件

注意:

  • 新建Component
  • 名字为 “ index”
  • 与pages同级

微信小程序 自定义底部导航栏(tabBar)_第1张图片

index.js文件

// custom-tab-bar/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    selected: 0,
    color: "#999999",
    selectedColor: "#EE3D42",
    listTab: [
      {
        pagePath: "/pages/index/index",
        text: "导航一",
        iconPath: "/static/guide_no.png",
        selectedIconPath: "/static/guide_active.png"
      },
      {
        pagePath: "/pages/calculate/calculate",
        text: "导航二",
        iconPath: "/static/calculate_no.png",
        selectedIconPath: "/static/calculate_active.png"
      },
      {
        pagePath: "/pages/personal/personal",
        text: "个人中心",
        iconPath: "/static/personal_no.png",
        selectedIconPath: "/static/personal_active.png"
      }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset;
      const url = data.path;
      wx.switchTab({ url });
      //this.setData({
       // selected: data.index
      //})
    }
  }
})

index.json

{
  "component": true
}

index.wxml



  
  
    
    {{item.text}}
  



index.wxss

/* custom-tab-bar/index.wxss */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
  margin: 10rpx 0;
}

.tab-bar-item cover-view {
  font-size: 12px;
}

2.在app.json里添加,并配置 tabBar    custom:true

"tabBar": {
    "custom": true,
    "color": "#999999",
    "selectedColor": "#EE3D42",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "导航一",
        "iconPath": "static/guide_no.png",
        "selectedIconPath": "static/guide_active.png"
      },
      {
        "pagePath": "pages/calculate/calculate",
        "text": "导航二",
        "iconPath": "static/calculate_no.png",
        "selectedIconPath": "static/calculate_active.png"
      },
      {
        "pagePath": "pages/personal/personal",
        "text": "个人中心",
        "iconPath": "static/personal_no.png",
        "selectedIconPath": "static/personal_active.png"
      }
    ]
  },

 

微信小程序 自定义底部导航栏(tabBar)_第2张图片

注意:

点击导航栏时跳转不灵敏.可能会跳转两次

解决方案:

在添加的导航页面的 onShow函数里增加以下代码

if (typeof this.getTabBar === 'function' && this.getTabBar()) {
   this.getTabBar().setData({
     selected: 2 //0,1,2 0-导航一  1-导航二  2-个人中心
   })
}

微信小程序 自定义底部导航栏(tabBar)_第3张图片

底部导航栏隐藏或显示

1.自定义导航栏时

  tabBar配置: custom:true

custom-tab-bar下的index.wxml



  
  
    
    {{item.text}}
  



custom-tab-bar下的index.js增加定义

showBar:true

在需要隐藏导航栏的页面调用 -- 隐藏 tabbar

this.getTabBar().setData({
  showBar: false
});

在需要隐藏导航栏的页面调用 -- 显示 tabbar

this.getTabBar().setData({
  showBar: true
});

2.配置导航栏时

隐藏tabbar 点击查看详细

wx.hideTabBar();

wx.hideTabBar(Object object)

基础库 1.9.0 开始支持,低版本需做兼容处理。

隐藏 tabBar

参数

Object object

属性 类型 默认值 必填 说明
animation boolean false 是否需要动画效果
success function   接口调用成功的回调函数
fail function   接口调用失败的回调函数
complete function   接口调用结束的回调函数(调用成功、失败都会执行)

显示tabbar  点击查看详细

wx.showTabBar();

wx.showTabBar(Object object)

基础库 1.9.0 开始支持,低版本需做兼容处理。

显示 tabBar

参数

Object object

属性 类型 默认值 必填 说明
animation boolean false 是否需要动画效果
success function   接口调用成功的回调函数
fail function   接口调用失败的回调函数
complete function   接口调用结束的回调函数(调用成功、失败都会执行)

 

你可能感兴趣的:(#,小程序,小程序)