index.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <template>
  2. <view class="container body">
  3. <view class="info">
  4. <scroll-view scroll-y="true" class="scroll-view">
  5. <view class="list-scroll-view">
  6. <slot></slot>
  7. </view>
  8. </scroll-view>
  9. </view>
  10. <view class="foot" v-if="frameStyle&&frameStyle.useBar||false">
  11. <view class="list" v-for="(item,index) in barList" :key="index" @tap="toPath(index,item)">
  12. <image class="image" :src="item.normal" mode="" v-if="active!=index"></image>
  13. <image class="image" :src="item.active" mode="" v-else></image>
  14. <view class="name" :style="{color:active==index?frameStyle.barActive||'#FB1438':''}">{{item.name}}</view>
  15. </view>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. props: {
  22. frameStyle: {
  23. type: Object,
  24. },
  25. },
  26. data() {
  27. return {
  28. active: 0,
  29. barList: [{
  30. name: '首页',
  31. route: 'pages/home/index',
  32. normal: require('@/static/shouye.png'),
  33. active: require('@/static/shouye_1.png'),
  34. type: '0'
  35. },
  36. {
  37. name: '微店',
  38. route: 'pages/store/index',
  39. normal: require('@/static/store.png'),
  40. active: require('@/static/store_1.png'),
  41. type: '0'
  42. },
  43. {
  44. name: '分类',
  45. route: 'pagesHome/market/type',
  46. normal: require('@/static/type.png'),
  47. active: require('@/static/type_1.png'),
  48. type: '1'
  49. },
  50. {
  51. name: '购物车',
  52. route: 'pages/market/index',
  53. normal: require('@/static/market.png'),
  54. active: require('@/static/market_1.png'),
  55. type: '0'
  56. },
  57. {
  58. name: '我的',
  59. route: 'pages/my/index',
  60. normal: require('@/static/my.png'),
  61. active: require('@/static/my_1.png'),
  62. type: '0'
  63. },
  64. ]
  65. };
  66. },
  67. created: function() {
  68. const that = this;
  69. that.search()
  70. },
  71. onShow: function() {},
  72. methods: {
  73. search() {
  74. const that = this;
  75. let pages = getCurrentPages();
  76. let currentPage = pages[pages.length - 1];
  77. let index = that.barList.findIndex((i) => i.route == currentPage.route);
  78. if (index) that.$set(that, `active`, index);
  79. },
  80. toPath(index, item) {
  81. const that = this;
  82. that.$set(that, `active`, index);
  83. that.$emit('toPath', item)
  84. }
  85. }
  86. }
  87. </script>
  88. <style lang="scss">
  89. .body {
  90. .info {
  91. position: relative;
  92. flex-grow: 1;
  93. }
  94. .foot {
  95. height: 8vh;
  96. overflow: hidden;
  97. background-color: var(--fffColor);
  98. display: flex;
  99. flex-direction: row;
  100. justify-content: space-around;
  101. border-top: 1px solid var(--f1Color);
  102. .list {
  103. padding: 1vw 0;
  104. text-align: center;
  105. .image {
  106. width: 7vw;
  107. height: 6vw;
  108. }
  109. .name {
  110. font-size: 12px;
  111. }
  112. }
  113. }
  114. }
  115. .scroll-view {
  116. position: absolute;
  117. top: 0;
  118. left: 0;
  119. right: 0;
  120. bottom: 0;
  121. .list-scroll-view {
  122. display: flex;
  123. flex-direction: column;
  124. }
  125. }
  126. </style>