uniapp 小程序 tabber 使用动态图标

UniApp小程序的TabBar组件可以设置动态图标，通过结合Iconfont、网络图片或者其他自定义路径的方式来实现。下面是一种常见的做法：

1. **Iconfont**：如果你使用的是Iconfont图标库，可以在`uni-tabbar-item`的`icon`属性里引用动态图标类名，然后通过设置data来控制显示不同的图标。例如：

<template>
  <uni-tabbar>
    <uni-tabbar-item :icon="currentIcon" @click="changeIcon">首页</uni-tabbar-item>
  </uni-tabbar>
</template>

<script>
export default {
  data() {
    return {
      currentIcon: 'icon-default', // 默认图标
      icons: ['icon-home', 'icon-setting'] // 可选项数组
    };
  },
  methods: {
    changeIcon() {
      this.currentIcon = (this.currentIcon === this.icons[0]) ? this.icons[1] : this.icons[0]; // 交换图标
    }
  }
};
</script>

2. **网络图片**：如果你想展示动态的网络图片，可以使用`uni.getImageInfo`获取图片URL，然后更新`icon-src`属性，示例：

<template>
  <uni-tabbar-item :icon-src="dynamicIconUrl"></uni-tabbar-item>
</template>

<script>
export default {
  data() {
    return {
      dynamicIconUrl: '默认图标url'
    };
  },
  methods: {
    updateDynamicIcon(newIconUrl) {
      this.dynamicIconUrl = newIconUrl;
    }
  }
};
// 在需要更换图标的地方调用updateDynamicIcon方法
</script>