index.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <template>
  2. <!--
  3. @copyright CYZ
  4. @time 2022/8/6
  5. 创业专区-导航栏
  6. -->
  7. <view class="main">
  8. <u-tabbar v-model="current" :list="list" height="55px" activeColor='#FA6138' inactiveColor='#666666' icon-size="55"
  9. :before-switch="beforeSwitch"></u-tabbar>
  10. </view>
  11. </template>
  12. <script>
  13. import imgs from '@/common/img.js';
  14. export default {
  15. props: {
  16. //激活选项的索引
  17. current: {
  18. type: Number,
  19. default: 0
  20. }
  21. },
  22. data() {
  23. return {
  24. list: [
  25. {
  26. iconPath: '/static/shop_tabbar_01.png',
  27. selectedIconPath: '/static/shop_tabbar_01.png',
  28. text: '宜昌优选',
  29. url: '/pages/index/lidaPage'
  30. },
  31. {
  32. iconPath: '/static/shop_tabbar_02.png',
  33. selectedIconPath: '/static/shop_select_tabbar_04.png',
  34. text: '商品分类',
  35. url: '/pages/index/list'
  36. },
  37. {
  38. iconPath: '/static/shop_tabbar_03.png',
  39. selectedIconPath: '/static/shop_select_tabbar_03.png',
  40. text: '附近门店',
  41. url: '/pages/nearbyShop/city'
  42. },
  43. {
  44. url: "/pages/index/personal",
  45. iconPath: '/static/shop_tabbar_04.png',
  46. selectedIconPath: '/static/shop_select_tabbar_04.png',
  47. text: "个人中心"
  48. }
  49. ]
  50. }
  51. },
  52. methods: {
  53. beforeSwitch(index) {
  54. let isOtherPage = index != this.current;
  55. // console.log(isOtherPage, index, 111)
  56. if (isOtherPage) {
  57. uni.redirectTo({
  58. url: this.list[index].url
  59. })
  60. }
  61. return false
  62. }
  63. }
  64. }
  65. </script>
  66. <style lang="scss" scoped>
  67. .main {
  68. ::v-deep .u-tabbar {
  69. .u-tabbar__content__item {
  70. .u-tabbar__content__item__button {
  71. .u-icon__img {
  72. * {
  73. background-size: 100% 100% !important;
  74. }
  75. }
  76. }
  77. .u-tabbar__content__item__text {
  78. bottom: 12rpx;
  79. }
  80. }
  81. }
  82. }
  83. </style>