微信小程序自定义tabbar、中间凸起、uniapp注意避坑

乾卦三爻

已于 2022-08-03 10:51:12 修改

阅读量2.3k

点赞数

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

于 2022-08-03 10:43:02 首次发布

本文链接：https://blog.csdn.net/weixin_46325225/article/details/126135551

版权

实现微信小程序自定义tabbar，效果图如下所示：
在这里插入图片描述
在根目录（与pages文件夹同级）下新建名为custom-tab-bar的文件夹，在文件夹中新建如下四个文件：
1.index.js

Component({
   
  data: {
   
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#1976d2",
    list: [{
   
		"pagePath": "/pages/home/index",
		"iconPath": "../static/home.png",
		"selectedIconPath": "../static/home_1.png",
		"text": "首页",
		"number":''
    },
	{
   
		"pagePath": "/pages/server/index",
		"iconPath": "../static/server.png",
		"selectedIconPath": "../static/server_1.png",
		"text": "服务",
		"number":''
    },
	{
   
        "pagePath": "/pages/circle/index",
        "iconPath": "../static/dynamic.png",
        "selectedIconPath": "../static/dynamic_1.png",
        "text": "村友圈",
		"number":''
      },
	  {
   
	    "pagePath": "/pages/chat/index",
	    "iconPath": "../static/msg.png",
	    "selectedIconPath": "../static/msg_1.png",
	    "text": "消息",
		"number":''
	  },
      
      {
   
        "pagePath": "/pages/userCentral/index",
        "iconPath": "../static/my.png",
        "selectedIconPath": "../static/my_1.png",
        "text":