market.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <template>
  2. <view class="market-box">
  3. <gap height="10rpx" />
  4. <view class="market-tab">
  5. <view v-for="(item , index) in marketTab" :key="`marketTab_${index}`"
  6. :class="['market-tab-item' , index === marketTabIndex ? 'active-tab-item' : '' ]"
  7. @click.stop="marketTabIndex = index">
  8. {{ item }}
  9. </view>
  10. </view>
  11. <swiper :duration="150" class="market-content" :style="{'height': scrollHeight + 'px' }" :current="marketTabIndex">
  12. <swiper-item>
  13. <scroll-view :style="{'height': scrollHeight + 'px' }" class="market-scroll" scroll-y>
  14. <!-- <add-optional ref="addOptionalRef" /> -->
  15. <marketplace ref="optionalRef" :marketplaceList="optional" />
  16. </scroll-view>
  17. </swiper-item>
  18. <swiper-item>
  19. <scroll-view :style="{'height': scrollHeight + 'px' }" class="market-scroll" scroll-y>
  20. <marketplace ref="marketplaceRef" :marketplaceList="marketAll" />
  21. </scroll-view>
  22. </swiper-item>
  23. </swiper>
  24. </view>
  25. </template>
  26. <!-- array.sort(function (x,y) {
  27. return x-y;
  28. }); -->
  29. <script>
  30. import {
  31. mapGetters
  32. } from 'vuex'
  33. export default {
  34. name: "marketModules",
  35. computed: {
  36. ...mapGetters([
  37. 'PageContentHeight',
  38. 'tabBarHeight',
  39. 'optional',
  40. 'marketAll'
  41. ]),
  42. },
  43. data() {
  44. return {
  45. scrollHeight: 0,
  46. marketTabIndex: 1,
  47. marketTab: [
  48. '自选',
  49. '市场'
  50. ],
  51. };
  52. },
  53. watch: {
  54. // market:{
  55. // handler(newArr){
  56. // if(newArr && newArr.length > 0){
  57. // this.optional = newArr.slice(0,6)
  58. // }
  59. // },
  60. // immediate:true,
  61. // deep:true
  62. // },
  63. PageContentHeight: {
  64. handler(newH) {
  65. this.scrollHeight = newH - uni.upx2px(114) - uni.upx2px(10) - this.tabBarHeight;
  66. },
  67. immediate: true
  68. }
  69. },
  70. }
  71. </script>
  72. <style lang="scss" scoped>
  73. .market-box {
  74. width: 100%;
  75. .market-tab {
  76. padding: 0 $pages-padding ;
  77. width: 100%;
  78. height: 114rpx;
  79. display: flex;
  80. align-items: center;
  81. .market-tab-item {
  82. font-size: 28rpx;
  83. font-family: PingFang SC, PingFang SC-Bold;
  84. font-weight: 700;
  85. color: #1a1a1a;
  86. line-height: 40rpx;
  87. letter-spacing: 0.6rpx;
  88. +.market-tab-item {
  89. margin-left: 50rpx;
  90. }
  91. }
  92. .active-tab-item {
  93. font-size: 34rpx;
  94. color: #20B482;
  95. position: relative;
  96. &::before {
  97. position: absolute;
  98. left: 50%;
  99. transform: translateX(-50%);
  100. bottom: -20rpx;
  101. content: '';
  102. width: 80%;
  103. height: 3px;
  104. border-radius: 2px;
  105. background-color: #20B482;
  106. }
  107. }
  108. }
  109. .market-content {
  110. width: 100%;
  111. .market-scroll {
  112. width: 100%;
  113. }
  114. }
  115. }
  116. </style>