index.vue

/**
* @Author Think
* @Date 2018/11/24
*/

<template>
  <section :class="cusClass" class="content">
    <slot/>
  </section>
</template>

<script>
export default {
  name: 'HContent',
  props: {
    cusClass: {
      type: String,
      default: '',
    },
    calContent: {
      type: Boolean,
      default: true,
    },
  },
  mounted () {
    if (this.calContent) {
      this.contentHeight()
    }
  },
  activated () {
    if (this.calContent) {
      this.contentHeight()
    }
  },
  methods: {
    getHeader () {
      let $el = this.$el.previousElementSibling
      do {
        if ($el) {
          if ($el._prevClass.indexOf('h-header') !== -1) {
            break
          }
          $el = $el.previousElementSibling
        }
      } while ($el)

      return $el
    },
    getNextElementHeight () {
      let nextElement = this.$el.nextElementSibling
      let height = 0
      if (nextElement) {
        height = window.getComputedStyle(nextElement).height
        if (height) {
          height = Number(height.replace('px', ''))
        }
      }
      return height
    },
    contentHeight () {
      // const headerEl = this.getHeader()
      const nextHeight = this.getNextElementHeight()
      /* const winHeight = window.innerHeight
         const winWidth = window.innerWidth
         let paddingHeight = 0
         if (headerEl) {
           if (detectOS() === 'ios' && winWidth === 375 && winHeight === 812) {
             paddingHeight = 40
           } else if (detectOS() === 'ios' && winWidth === 414 && winHeight === 896) {
             paddingHeight = 40
           } else if (detectOS() === 'ios') {
             paddingHeight = 20
           } else {
             paddingHeight = 0
           }
         } */
      let content = this.$el
      let offsetTop = content.offsetTop
      if (offsetTop >= window.innerHeight) {
        offsetTop = 0
      }
      content.style.height = (window.innerHeight - offsetTop - nextHeight) + 'px'
    },
  },
}
</script>

<style lang="less">
  .content {
    flex: 1;
    overflow: hidden;
    background-color: #fafafa;
    position: relative;
    overflow-y: scroll;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }

  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      .has-header {
        top: 84px;
      }
    }
  }

  // iPhoneX Max适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      .has-header {
        top: 84px;
      }
    }
  }
</style>