vscode 编译小程序，自定义tabbar，踩坑

本文链接：https://blog.youkuaiyun.com/qq_43666574/article/details/129756007

文章介绍了如何在VSCode中进行小程序开发时自定义tabbar的步骤，包括创建custo-tab-bar文件夹，编写index.js、index.json、index.wxml和index.wxss文件，并在微信开发者工具中预览和复制到VSCode项目中。通过这些步骤，作者成功解决了系统默认tabbar样式不符需求的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vscode 编译小程序，自定义tabbar

背景：项目需求需要开发一款小程序，但是底部的tabbar的样式，系统自带的无法满足开发需要所以需要自定义，我是vscode编译，然后在微信开发者工具预览效果，就是这个坑操作，倒是我搞了一天，可能还是技术不行，哈哈哈，总之解决了，先来说说怎么出坑的吧

######第一步：停止vscode运行（因为不通知运行，会试试保存，那后续在微信开发者工具操作会被删除）。
######第二步：在微信开发整根目录新建一个文件夹，试过了，文件夹名字必须是custo-tab-bar，然后新建四个文件
index.js

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#408e82",
    borderStyle: "white",
    backgroundColor: "#000",
    "list": [
      {
        "current": 0,
        "pagePath": "/pages/home/home",
				"text": "主页",
				"iconPath": "../static/iconImage/icon_home.png",
				"selectedIconPath": "../static/iconImage/icon_home_active.png"
      },
      {
        "current": 1,
        "pagePath": "/pages/portfolios/portfolios",
				"text": "作品集",
				"iconPath": "../static/iconImage/icon_portfolio.png",
				"selectedIconPath": "../static/iconImage/icon_portfolio_active.png"
      },
      
    ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      console.log(e);
      const idx = e.currentTarget.dataset.index
      const path = e.currentTarget.dataset.path
      console.log(path)
      // this.setData({
      //   selected: idx
      // })
      wx.switchTab({
        url: path,
      });
    }
  }
})

index.json

{
  "component": true,
  "usingComponents": {}
}

index.wxml

<!-- 自定义tab -->
<view class="tab-bar">
  <view wx:for="{{list}}" wx:key="index" class="top_view" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab" >
    <view>
      <image class="img_" src="{{selected === index ?item.selectedIconPath : item.iconPath}}"></image>
    </view>
    <view style="color: {{selected === index ?selectedColor : color}}">
        {{item.text}}
    </view>
  </view>
</view>

index.wxss
.tab-bar{
  width:100%;
  height:65px;
  position: fixed;
  bottom:0;
  padding:10rpx;
  margin-left:-4rpx;
  background:#000;
  font-size:20rpx;
  color:#fcf7f7;
  box-shadow: 6rpx 6rpx 6rpx 6rpx rgb(248, 245, 245);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.top_view{
  flex: 1;
  text-align:center; 
  font-size:14px;
}
.img_{
  width:30px;
  height:30px;
}