tabbar.vue 853 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <template>
  2. <view>
  3. <uv-tabbar activeColor="#6FB6B8" :value="currentRouter" @change="change" :safeAreaInsetBottom="false" :placeholder="false">
  4. <uv-tabbar-item v-for="(item, index) in list" :key="index" :text="item.text">
  5. <template v-slot:active-icon>
  6. <image class="icon" :src="item.imgUrlActive"></image>
  7. </template>
  8. <template v-slot:inactive-icon>
  9. <image class="icon" :src="item.imgUrl"></image>
  10. </template>
  11. </uv-tabbar-item>
  12. </uv-tabbar>
  13. </view>
  14. </template>
  15. <script>
  16. export default {
  17. props: ['list'],
  18. data() {
  19. return {
  20. currentRouter: 0
  21. }
  22. },
  23. created() {},
  24. mounted() {},
  25. methods: {
  26. // 导航栏切换回调
  27. change(e) {
  28. this.currentRouter = e
  29. this.$emit('changeRouter', this.list[e].show, this.list[e].text)
  30. }
  31. }
  32. }
  33. </script>
  34. <style scoped>
  35. .icon {
  36. width: 40rpx;
  37. height: 40rpx;
  38. }
  39. </style>