Barra inferior personalizada

Documento de referência: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

Antecedentes: Como a barra de guias padrão produzida pelo applet não pode personalizar o estilo desejado, precisamos escrever um novo, mas a experiência que escrevemos está piscando toda vez que a página é trocada, então a experiência não é muito boa, então vamos procurar for other No modo de barra de guias Better, descobrimos que o miniaplicativo WeChat é um documento que podemos personalizar, então vamos olhar para baixo juntos!

• Primeiro, o item tabBar em app.json precisa especificar o campo personalizado e o restante das configurações relacionadas a tabBar também estão concluídas.
• O item usingComponents precisa ser declarado no json de todas as abas, e também pode ser habilitado globalmente no app.json.
• Adicione o arquivo de código tabBar no diretório raiz do código custom-tab-bar(não sei se o nome do arquivo é fixo ou não, mas consulte o documento do applet)
  这个有个弊端就是第一次还是会闪烁，后续都不会啦~

A demonstração do arquivo da barra de guias personalizada é a seguinte:
index.wxml

<view class="my_tab">
  <view class="item-tab" wx:for="{
   
   {list}}" wx:key="index" data-path="{
   
   {item.pagePath}}" data-name="{
   
   {item.text}}" data-index="{
   
   {index}}" bindtap="switchTab" style="color:{
   
   {selected==index?'#1A1C36':'#8C8E9B'}}">
    <image class="img" mode="heightFix" src="{
   
   {selected==index?item.selectedIconPath:item.iconPath}}" />
    <view>{
   
   {item.text}}</view>
  </view>
</view>

index.wxss

/* pages/my_tab.wxss */
.my_tab {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  background-color: #FFFFFF;
  line-height: 20rpx;
  font-size: 20rpx;
  box-shadow: 0px -1px 0px 0px #E3E4E7;
  /* overflow: hidden; */
  padding-bottom: env(safe-area-inset-bottom);
}

.my_tab .item-tab {
  flex: 1;
  text-align: center;
}

.my_tab .img {
  width: 48rpx;
  height: 48rpx;
  display: block;
  margin: 14rpx auto 4rpx;
}

index.js
这里的list需要跟app.json下的tabBar中list保持一致，图片路径引入比那边多个/
在切换时只需要这个加switchTab就可以，两边都加会出现闪烁

Component({
  data: {
    selected: 0,
    "color": "#8C8E9B",
    "selectedColor": "#1A1C36",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "/pages/home/index",
        "iconPath": "/utils/assets/tab1.png",
        "selectedIconPath": "/utils/assets/tab1-select.png",
        "text": "爱车"
      },
      {
        "pagePath": "/pages/activityHome/index",
        "iconPath": "/utils/assets/activity.png",
        "selectedIconPath": "/utils/assets/activity-select.png",
        "text": "活动"
      },
      {
        "pagePath": "/pages/me/index",
        "iconPath": "/utils/assets/tab2.png",
        "selectedIconPath": "/utils/assets/tab2-select.png",
        "text": "我的"
      }
    ]
  },
  attached() {},
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      if (data.index !== this.data.selected) {
        const url = data.path
        getApp().$$Rangers.event('bottom_nav', {
          'bottom_nav_name': data.name
        });
        wx.switchTab({
          url
        })
        // this.setData({
        //   selected: data.index
        // })
      }
    }
  }
})

Demonstração do arquivo de salto correspondente:

Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0  // 这个对应list数组中的下标
        })
      	// 下面就跟正常写页面一样啦~~~~~~
      }
    }
  },
  data:{},
  onload(){}
 })

O que os outros podem fazer, nós também podemos, vamos lá! ! !