萌新微信小程序成长-1（封装自定义tabbar）

最新推荐文章于 2024-12-04 19:23:05 发布

笑啊笑

最新推荐文章于 2024-12-04 19:23:05 发布

阅读量618

点赞数

CC 4.0 BY-SA版权

文章标签：小程序

本文链接：https://blog.csdn.net/weixin_44156500/article/details/87290873

在这里插入图片描述

//app.json
 "tabBar": {
    "backgroundColor": "#ffffff",
    "color": "#888888",
    "selectedColor": "#888888",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "./commont/tabbar/icon/home0.png",
        "selectedIconPath": "./commont/tabbar/icon/home1.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/me/me",
        "iconPath": "./commont/tabbar/icon/my0.png",
        "selectedIconPath": "./commont/tabbar/icon/my1.png",
        "text": "我的"
      }
    ]
  }

//tabbar.js
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabbar: {
    //tabbar格式和wx自带的一样
    //这里的路径是基于你自定义tabbar的路径
      type: Object,
      value: {
        "backgroundColor": "#ffffff",
        "color": "#979795",
        "selectedColor": "#1c1c1b",
        "list": [
          {
            "pagePath": "../pages/index/index",
            "iconPath": "icon/home0.png",
            "selectedIconPath": "icon/home1.png",
            "text": "首页"
          },
          {
            "pagePath": "../pages/fb/fb",
            "iconPath": "icon/release.png",
            "isSpecial": true,
            "text": "发布"
          },
          {
            "pagePath": "../pages/me/me",
            "iconPath": "icon/my0.png",
            "selectedIconPath": "icon/my1.png",
            "text": "我的"
          }
        ]
      }
    }
  },

  data: {
   
  },

  methods: {
     
  }
})

tabbar.json
{
//打开组件
  "component": true,
  "usingComponents": {}
}

app.js
//隐藏原生tabbar
 wx.hideTabBar();
 //封装路径函数
editTabbar: function() {
  let tabbar = this.globalData.tabBar;
  let currentPages = getCurrentPages();
  let _this = currentPages[currentPages.length - 1];
  let pagePath = _this.route;
  (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
  for (let i in tabbar.list) {
    tabbar.list[i].selected = false;
    (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
  }
  _this.setData({
    tabbar: tabbar
  });
},
//这里的路径是绝对路径
globalData: {
  tabBar: {
    "backgroundColor": "#ffffff",
    "color": "#888888",
    "selectedColor": "#888888",
    "list": [{
        "pagePath": "/pages/index/index",
        "iconPath": "icon/home0.png",
        "selectedIconPath": "icon/home1.png",
        "text": "首页"
      },
      {
        "pagePath": "/pages/fb/fb",
        "iconPath": "icon/release.png",
        "isSpecial": true,
        "text": "发布"
      },
      {
        "pagePath": "/pages/me/me",
        "iconPath": "icon/my0.png",
        "selectedIconPath": "icon/my1.png",
        "text": "我的"
      }
    ]
  }
}

//index.json
{
//引用组件
 "usingComponents": {
  "component-topnav": "/commont/topnav/topnav",
  "tabbar": "/commont/tabbar/tabbar",

    },

//index.js 
data: {
    tabbar: {},
    }
	//在onload和onshow里面加路径
	//如果onshow不加 每次别的页面进入tabbar页面下面的原生tabbar会出现
    app.editTabbar();