recommend.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <template>
  2. <view class="container">
  3. <div class="bar" :style="{ height:barHeight+'px' }"></div>
  4. <view :style="{ height:height + 'px',top:barHeight+'px' }" class="top">
  5. <view
  6. class="recommend"
  7. @click="transformation(index)"
  8. v-for="(item, index) in top"
  9. :key="item.id"
  10. :class="{ recommendtwo: recommendindex == index }"
  11. >
  12. {{ item.name }}
  13. </view>
  14. </view>
  15. <!-- <view class="capacity" :is="currentView"></view> -->
  16. <recommendTop v-show="recommendindex == 0" ref="recommend"></recommendTop>
  17. <merchantTop v-show="recommendindex == 1" @bottomList="getbottomlist" ref="merchant"></merchantTop>
  18. </view>
  19. </template>
  20. <script>
  21. import recommendTop from "./recommend-top/top.vue";
  22. import merchantTop from "./merchant-top/top.vue";
  23. let app = getApp()
  24. export default {
  25. components: {
  26. recommendTop,
  27. merchantTop,
  28. },
  29. data() {
  30. return {
  31. recommendindex: 0,
  32. top: [
  33. {
  34. id: 1,
  35. name: "推荐",
  36. },
  37. {
  38. id: 2,
  39. name: "商学院",
  40. },
  41. ],
  42. bottomList: [],
  43. height: 0,
  44. barHeight: 0
  45. };
  46. },
  47. onLoad() {
  48. this.height = 44
  49. this.barHeight = app.globalData.barHeight
  50. },
  51. // onShow() {
  52. // if(this.recommendindex==1){
  53. // this.$refs.merchant.getMsg()
  54. // }
  55. // },
  56. //上拉加载
  57. onReachBottom() {
  58. if (this.recommendindex == 0) {
  59. this.$refs.recommend.loaderMore();
  60. } else if (this.recommendindex == 1) {
  61. this.$refs.merchant.loaderMore();
  62. }
  63. },
  64. //下拉刷新
  65. onPullDownRefresh() {
  66. this.isload();
  67. uni.stopPullDownRefresh();
  68. },
  69. onReady(){
  70. this.isload();
  71. },
  72. methods: {
  73. getbottomlist(e){
  74. this.bottomList = e
  75. },
  76. transformation(index) {
  77. console.log(index, 'index')
  78. this.recommendindex = index;
  79. this.isload()
  80. },
  81. isload() {
  82. if (this.recommendindex == 0) {
  83. this.$refs.recommend.isload();
  84. } else {
  85. this.$refs.merchant.isload();
  86. }
  87. },
  88. },
  89. };
  90. </script>
  91. <style>
  92. page{
  93. background-color: #F5F5F5;
  94. }
  95. </style>
  96. <style lang="scss" scoped>
  97. .container {
  98. .bar {
  99. background-color: #0B844A;
  100. position: fixed;
  101. z-index: 1;
  102. width: 100%;
  103. }
  104. .top {
  105. overflow: hidden;
  106. // padding-top: 30rpx;
  107. // line-height: 120rpx;
  108. z-index: 1;
  109. width: 100%;
  110. // height: 120rpx;
  111. position: fixed;
  112. background-color: #0B844A;
  113. display: flex;
  114. justify-content: center;
  115. align-items: center;
  116. color: rgba(255, 255, 255, 1);
  117. .recommend {
  118. font-size: 36rpx;
  119. font-weight: 500;
  120. box-sizing: border-box;
  121. margin: 0 52rpx;
  122. height: 44px;
  123. line-height: 44px;
  124. }
  125. .recommendtwo {
  126. border-bottom: 4rpx #ffffff solid;
  127. border-radius: 2rpx;
  128. }
  129. }
  130. }
  131. .recommend {
  132. overflow: hidden;
  133. }
  134. </style>