new-greemall-wxapp/components/zj-container/zj-fiex-column.vue

<template>
  <view
    :class="{
      'zj-page-container': true,
      'zj-page-container-column': direction === 'column'
    }"
    :style="{
      width,
      height,
      background
    }"
  >
    <slot name="before"></slot>
    <view :class="['zj-page-fill', zjPageFillClass]">
      <view class="zj-page-fill-absolute">
        <template v-if="scroll">
          <scroll-view
            class="zj-page-fill-scroll"
            scroll-y
            enable-flex
            @scrolltoupper="
              (...p) => {
                $emit('scrolltoupper', p)
              }
            "
            @scrolltolower="
              (...p) => {
                $emit('scrolltolower', p)
              }
            "
            @scroll="
              (...p) => {
                $emit('scroll', p)
              }
            "
            @refresherpulling="
              (...p) => {
                $emit('refresherpulling', p)
              }
            "
            @refresherrefresh="
              (...p) => {
                $emit('refresherrefresh', p)
              }
            "
            @refresherrestore="
              (...p) => {
                $emit('refresherrestore', p)
              }
            "
            @refresherabort="
              (...p) => {
                $emit('refresherabort', p)
              }
            "
            :refresher-enabled="refresherEnabled"
            :refresher-triggered="refresherTriggered"
          >
            <slot></slot>
          </scroll-view>
        </template>
        <template v-else>
          <slot></slot>
        </template>
      </view>
    </view>
    <slot name="after"></slot>
  </view>
</template>

<script>
export default {
  props: {
    background: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    direction: {
      type: String,
      default: 'column'
    },
    scroll: {
      type: Boolean,
      default: true
    },
    zjPageFillClass: {
      type: String,
      default: ''
    },
    refresherEnabled: {
      type: Boolean,
      default: false
    },
    refresherTriggered: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
.zj-page-container {
  display: flex;
  display: -webkit-flex;
  box-sizing: border-box;
}

.zj-page-container-row {
  flex-direction: row;
}

.zj-page-container-column {
  flex-direction: column;
}

.zj-page-fill {
  box-sizing: border-box;
  flex: 1;
  overflow: hidden;
  position: relative;

  .zj-page-fill-absolute {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .zj-page-fill-scroll {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
}
</style>