Tabbar.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <template >
  2. <view>
  3. <u-tabbar v-model="myCurrent" :list="tabbarList"
  4. inactive-color="#A8B0AD"
  5. :before-switch="beforeSwitch" active-color="#009143" :height="elderStatus ? '110rpx' : '100rpx'" :icon-size="elderStatus ? '56rpx' : '40rpx'"></u-tabbar>
  6. </view>
  7. </template>
  8. <script>
  9. var img1=require('@/assets/img/riLine-vip-crown-2-line.svg')
  10. var img2=require('@/assets/img/riFill-vip-crown-2-fill.svg')
  11. export default {
  12. name:"tabbarJob",
  13. props:{
  14. current: 0,
  15. elderStatus: false
  16. },
  17. data() {
  18. return {
  19. activeColor:"#5098FF",
  20. oldindex:this.current,
  21. myCurrent:this.current,
  22. tabbarList: [{
  23. iconPath: "home-3-line",
  24. selectedIconPath: "home-3-fill",
  25. text: '主页 ',
  26. count: 0,
  27. isDot: true,
  28. customIcon: true,
  29. pagePath2:"/pages/index/index",
  30. },
  31. {
  32. iconPath: img1,
  33. selectedIconPath: img2,
  34. text: '会员',
  35. midButton: true,
  36. //customIcon: true,
  37. pagePath2:"/pages/monthlyCardActivity/monthlyCardBuy",
  38. },
  39. {
  40. iconPath: "road-map-line",
  41. selectedIconPath: "road-map-fill",
  42. text: '找桩',
  43. midButton: true,
  44. customIcon: true,
  45. pagePath2:"/pages/searchPile/searchPile",
  46. },
  47. {
  48. iconPath: "user-5-line",
  49. selectedIconPath: "user-5-fill",
  50. text: '我的',
  51. count: 0,
  52. isDot: false,
  53. customIcon: true,
  54. pagePath2:"/pages/user/index",
  55. }
  56. ],
  57. };
  58. },methods:{
  59. setcount(c){
  60. this.myCurrent=c
  61. },
  62. beforeSwitch(index){
  63. if(index==this.current){
  64. return false
  65. }
  66. var url =this.tabbarList[index].pagePath2;
  67. uni.navigateTo({
  68. url: url
  69. })
  70. if(index==1){
  71. this.myCurrent=this.oldindex;
  72. return false;
  73. }else{
  74. return true;
  75. }
  76. },
  77. },mounted(){
  78. },destroyed(){
  79. }
  80. }
  81. </script>
  82. <style>
  83. </style>