mall-web-ssr/components/mobile/common/PullUp.vue

<template>
  <!-- 移动端上拉加载更多 -->
  <!--<a @click="scrollToTop" v-show="!hideToTop"><i class="iconfont icon-arrow-up icon-xlg"></i></a>-->
</template>
<script>
//  import { scrollTo } from '~utils/scroll'
function hanlder() {}
  export default {
    data () {
      return {
        hideToTop: true
      }
    },
    props: {
      searchMore: {
        type: Boolean
      },
      allPage: {
        type: Number
      },
      page: {
        type: Number
      },
      fixId: {
        type: String,
        default: null
      },
      isValid: {
        type: Boolean,
        default: true
      },
      FixedEl: { // 获取元素区域内滚动高度
        type: Boolean,
        default: false
      }
    },
    mounted () {
      let _this = this
      _this.$nextTick(function () {
        let obj = this.fixId ? document.getElementById(this.fixId) : window
        if (obj) {
          obj.removeEventListener('scroll', hanlder(), false)
          obj.addEventListener('scroll', function () {
            if (_this.isValid) {
              _this.scroll()
            }
          }, false)
        }
      })
    },
    methods: {
      scroll: function () {
        let scrolled = 0
        let height = 0
        let availHeight = window.screen.availHeight
//        console.log(document.getElementById(this.fixId).scrollHeight)
//        console.log(document.getElementById(this.fixId).scrollTop + window.screen.availHeight + '-------')
        if (this.fixId) {
          let obj = document.getElementById(this.fixId)
          height = obj.scrollHeight
          let _scrollHeight = 0.88
          if (this.$route.fullPath.indexOf('order') > -1) {
            _scrollHeight = 1.26
          }
          scrolled = obj.scrollTop - document.body.scrollWidth / 750 * 100 * _scrollHeight
        } else {
          height = document.body.scrollHeight
          scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
        }
        if (this.FixedEl) {
          let obj = document.getElementById(this.fixId)
          // availHeight = document.getElementById(this.fixId).clientHeight + 50
          let _sc = obj.clientHeight + obj.scrollTop
          if (obj.clientHeight + obj.scrollTop >= obj.scrollHeight - 30 && !this.searchMore && this.page < this.allPage) {
            this.getMore()
          }
        } else if (Math.ceil(scrolled + availHeight) >= height && !this.searchMore && this.page < this.allPage) {
          this.getMore()
        }
      },
      getMore: function () {
        if (!this.searchMore) {
          this.$emit('pullUpAction')
        }
      },
      scrollToTop () {
//        console.log(1)
        let el = document.querySelector('.mobile-fix-content')
        if (el) {
          el.scrollTop = 0
        }
//        console.log(el.scrollTop)
//        scrollTo(el ? '.mobile-fix-content' : 'body', 100, {offset: el ? el.scrollTop : null})
      }
    }
  }
</script>
<style lang="scss" scoped>
  a {
    position: fixed;
    right: .1rem;
    bottom: 1.1rem;
    background: rgba(0,0,0,.4);
    color: #fff;
    width: .88rem;
    height: .88rem;
    line-height: .88rem;
    border-radius: 100%;
    text-align: center;
    i {
      font-size: .46rem;
    }
  }
</style>