AyaoJies-boot/AyaoJies-app/house-master/house-life/pages/detail/addHouse.vue

<template>
  <view>
    <view class="wrap">
      <view class="u-tabs-box">
        <u-tabs-swiper ref="tabs" :current="current" :is-scroll="false" :list="tabList" bar-width="120"
                       swiperWidth="750" @change="change"></u-tabs-swiper>
      </view>
      <swiper :current="swiperCurrent" class="swiper-box" @animationfinish="animationfinish" @transition="transition">
        <swiper-item class="swiper-item">
          <add-all-house :model="model"></add-all-house>
        </swiper-item>
        <swiper-item class="swiper-item">
          <add-sub-house :model="model"></add-sub-house>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>

import addAllHouse from '@/components/zy/addAllHouse.vue'
import addSubHouse from '@/components/zy/addSubHouse.vue'

export default {
  components: {
    addAllHouse, addSubHouse
  },
  data() {
    return {
      tabList: [{name: '整租'}, {name: '合租'}],
      current: 0,
      swiperCurrent: 0,
      tabsHeight: 0,
      // 房源对象
      model: null,
    };
  },
  onLoad: function (option) {
    this.model = JSON.parse(option.room)
  },
  methods: {
    // tab栏切换
    change(index) {
      this.swiperCurrent = index;
    },
    transition({detail: {dx}}) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({detail: {current}}) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
      this.model.type = current;
    }
  }
};
</script>
<style>
page {
  background-color: #FFFFFF;
}
</style>
<style lang="scss" scoped>
.tabSwiper {
  width: 710 rpx;
  background-color: #ffffff;
  margin: 20 rpx auto;
  border-radius: 20 rpx;
  box-sizing: border-box;
  padding: 20 rpx;
  font-size: 28 rpx;

  .top {
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .title {
        margin: 0 10 rpx;
        font-size: 32 rpx;
        font-weight: bold;
      }
    }

    .right {
      color: $u-tips-color;
    }
  }

  .item {
    display: flex;
    margin: 20 rpx 0 0;

    .left {
      margin-right: 20 rpx;

      image {
        width: 200 rpx;
        height: 200 rpx;
        border-radius: 10 rpx;
      }
    }

    .content {
      .title {
        font-size: 28 rpx;
        line-height: 50 rpx;
      }
    }

    .right {
      margin-left: 10 rpx;
      padding-top: 20 rpx;
      text-align: right;
    }
  }
}

.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}

</style>