uniapp 仿京东底部tabbar图标动画

可以使用 `uni-icons` 组件来实现底部 Tabbar 图标的动画效果。

首先，在 `pages.json` 中定义底部 Tabbar 的样式和页面路径：

{
  "globalStyle": {
    "tabBar": {
      "border-top": "1px solid #eee",
      "background-color": "#fff",
      "color": "#999999",
      "selectedColor": "#e4393c",
      "list": [
        {
          "pagePath": "/pages/index/index",
          "text": "首页",
          "iconPath": "static/tabbar/home.png",
          "selectedIconPath": "static/tabbar/home-active.png"
        },
        {
          "pagePath": "/pages/category/category",
          "text": "分类",
          "iconPath": "static/tabbar/category.png",
          "selectedIconPath": "static/tabbar/category-active.png"
        },
        {
          "pagePath": "/pages/cart/cart",
          "text": "购物车",
          "iconPath": "static/tabbar/cart.png",
          "selectedIconPath": "static/tabbar/cart-active.png"
        },
        {
          "pagePath": "/pages/mine/mine",
          "text": "我的",
          "iconPath": "static/tabbar/mine.png",
          "selectedIconPath": "static/tabbar/mine-active.png"
        }
      ]
    }
  }
}

然后，在底部 Tabbar 的页面中，使用 `uni-icons` 组件来渲染图标，并添加动画效果：

<template>
  <view class="tabbar">
    <uni-icons v-for="(item, index) in tabList" :key="index" :type="item.icon" :size="24" :color="item.selected ? selectedColor : color" @click="switchTab(index)" :animation="item.animation"></uni-icons>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        {
          icon: 'home',
          text: '首页',
          selected: true,
          animation: {
            type: 'tada'
          }
        },
        {
          icon: 'category',
          text: '分类',
          selected: false,
          animation: {
            type: 'tada'
          }
        },
        {
          icon: 'cart',
          text: '购物车',
          selected: false,
          animation: {
            type: 'tada'
          }
        },
        {
          icon: 'mine',
          text: '我的',
          selected: false,
          animation: {
            type: 'tada'
          }
        }
      ],
      color: '#999999',
      selectedColor: '#e4393c'
    }
  },
  methods: {
    switchTab(index) {
      const tabList = this.tabList.map((item, idx) => {
        if (index === idx) {
          item.selected = true
          item.animation = { type: 'tada' }
        } else {
          item.selected = false
          item.animation = null
        }
        return item
      })
      this.tabList = tabList
      uni.switchTab({
        url: this.tabList[index].pagePath
      })
    }
  }
}
</script>

<style>
.tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #eee;
}

.tabbar uni-icons {
  display: block;
  text-align: center;
}
</style>

在上面的代码中，我们使用了 `uni-icons` 组件来渲染图标，并通过 `v-for` 循环渲染底部 Tabbar 的每一项。每一项都有一个 `selected` 属性来标识是否被选中，并且通过 `animation` 属性来控制图标的动画效果。

在点击底部 Tabbar 时，我们通过 `switchTab` 方法切换页面，并且更新底部 Tabbar 的状态和动画效果。