yicangzongtai_app_240321/pages/index/recommend.vue

<template>
  <view class="container">
	  <div class="bar" :style="{ height:barHeight+'px' }"></div>
    <view :style="{ height:height + 'px',top:barHeight+'px' }" class="top">
      <view
        class="recommend"
        @click="transformation(index)"
        v-for="(item, index) in top"
        :key="item.id"
        :class="{ recommendtwo: recommendindex == index }"
      >
        {{ item.name }}
      </view>
    </view>
    <!-- <view class="capacity" :is="currentView"></view> -->
    <recommendTop v-show="recommendindex == 0" ref="recommend"></recommendTop>
    <merchantTop v-show="recommendindex == 1" @bottomList="getbottomlist" ref="merchant"></merchantTop>
  </view>
</template>

<script>
import recommendTop from "./recommend-top/top.vue";
import merchantTop from "./merchant-top/top.vue";
let app = getApp()
export default {
  components: {
    recommendTop,
    merchantTop,
  },
  data() {
    return {
      recommendindex: 0,
      top: [
        {
          id: 1,
          name: "推荐",
        },
        {
          id: 2,
          name: "商学院",
        },
      ],
	  bottomList: [],
	  height: 0,
	  barHeight: 0
    };
  },
  onLoad() {
  	this.height =  44
	this.barHeight = app.globalData.barHeight
  },
 //  onShow() {
 //  	if(this.recommendindex==1){
	// 	this.$refs.merchant.getMsg()
	// }
 //  },
  //上拉加载
  onReachBottom() {
    if (this.recommendindex == 0) {
      this.$refs.recommend.loaderMore();
    } else if (this.recommendindex == 1) {
      this.$refs.merchant.loaderMore();
    }
  },
  //下拉刷新
  onPullDownRefresh() {
    this.isload();
    uni.stopPullDownRefresh();
  },
  onReady(){
	   this.isload();
  },
  methods: {
	  getbottomlist(e){ 
		  this.bottomList = e
	  },
    transformation(index) {
      console.log(index, 'index')
      this.recommendindex = index;
	  this.isload()
    },
    isload() {
      if (this.recommendindex == 0) {
        this.$refs.recommend.isload();
      } else {
        this.$refs.merchant.isload();
      }
    },
  },
};
</script>
<style>
	page{
		background-color: #F5F5F5;
	}
	</style>

<style lang="scss" scoped>

.container {
	.bar {
		background-color: #0B844A;
		position: fixed;
		z-index: 1;
		width: 100%;
	}
  .top {
    overflow: hidden;
    // padding-top: 30rpx;
    // line-height: 120rpx;
    z-index: 1;
    width: 100%;
    // height: 120rpx;
    position: fixed;
    background-color: #0B844A;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 1);
    .recommend {
      font-size: 36rpx;
      font-weight: 500;
      box-sizing: border-box;
      margin: 0 52rpx;
      height: 44px;
	  line-height: 44px;
    }
    .recommendtwo {
      border-bottom: 4rpx #ffffff solid;
      border-radius: 2rpx;
    }
  }
}
.recommend {
  overflow: hidden;
}
</style>