vue 上拉加载自定义组件，超好用哦

Posted 2021-01-20 gqx-html

1.创建组件components > zj-roll > index.vue

<template>
  <div>
    <slot></slot>
    <div class=‘bottom‘ v-if=‘(!lastPage.total && lastPage.empty!=0)‘>---------- <span >我也是有底线的</span> ----------</div>
    <div class=‘loading‘  v-if=‘lastPage.total && lastPage.empty!=0‘>
      <!-- <img src=‘@/assets/loading.png‘ /> -->
      玩命加载中</div>
  </div>
</template>
<script>
export default {
  name: ‘scroll‘,
  props: [‘lastPage‘],
  data: function () {
    return {
      startY: 0,
      endY: 0,
      initTop: null,
      move: 0,
      a: 0,
      b: 0
    }
  },
  methods: {
    getScrollTop () {
      let scrollTop = 0
      let bodyScrollTop = 0
      let documentScrollTop = 0
      if (document.body) {
        bodyScrollTop = document.body.scrollTop
      }
      if (document.documentElement) {
        documentScrollTop = document.documentElement.scrollTop
      }
      scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop
      return scrollTop
    },
// 文档的总高度
    getScrollHeight () {
      let scrollHeight = 0
      let bodyScrollHeight = 0
      let documentScrollHeight = 0
      if (document.body) {
        bodyScrollHeight = document.body.scrollHeight
      }
      if (document.documentElement) {
        documentScrollHeight = document.documentElement.scrollHeight
      }
      scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight
      return scrollHeight
    },
// 浏览器视口的高度
    getWindowHeight () {
      var windowHeight = 0
      if (document.compatMode === ‘CSS1Compat‘) {
        windowHeight = document.documentElement.clientHeight
      } else {
        windowHeight = document.body.clientHeight
      }
      return windowHeight
    },
    handleScroll () {
      if (this.getScrollTop() + this.getWindowHeight() === this.getScrollHeight()) {
        this.$emit(‘zj-load‘)
      }
    }
  },
  mounted () {
    window.addEventListener(‘scroll‘, this.handleScroll)
  }
}
</script>
<style lang="less" scoped>
.bottom{
  padding:20px 0;
  width:100%;
  text-align: center;
  font-size:16px;
  color: #bbb;
  span{
    margin:0 16px;
  }
}
.loading{
  padding:20px 0;
  text-align: center;
  display: flex;
  justify-content:center;
  align-items: center;
  font-size:16px;
  color: #bbb;
  img{
    animation: mymove .5s linear infinite;
    width:30px;
    height:30px;
    margin-right:10px;
  }
}

@-webkit-keyframes mymove {
  0%   {transform:rotate(0deg);}
  50%  {transform:rotate(180deg);}
  100% {transform:rotate(360deg);}
}

</style>

2.页面中引用组件

<template>
  <div class="collection" v-if="show">
    <scroll style="position:relative;-webkit-overflow-scrolling : touch;overflow:auto;margin-bottom:45px;" @zj-load="listLoad" :lastPage=‘{total: !allLoaded, empty: ulList.length}‘>         
      <x-header :left-options="{backText: ‘‘}">我的收藏</x-header>

      <stopData :ulList="ulList"  collection="收藏"  v-if="ulList.length > 0"></stopData>

      <div class="noPoster" v-else>
        <div class="font32">
          <img src="../../assets/sp_iconx.png"/>暂无收藏～
        </div>
      </div>
    </scroll>
  </div>
</template>

<script>
import { XHeader } from ‘vux‘
import stopData from ‘@/components/stop‘
import { collectGoods } from ‘@/api‘
import { timingSafeEqual } from ‘crypto‘;
import { types } from ‘util‘;
import scroll from ‘@/components/zj-roll‘

export default {
  data () {
    return {
      ulList: [],
      pageSize: 3,
      pageIndex: 1,
      show: false,
      allLoaded: false
    }
  },
  components: {
    stopData,
    XHeader,
    scroll
  },
  mounted () {
    this.defined()
  },
  methods: {
    listLoad(){
      let that = this
      if (!that.allLoaded) {
        that.defined()       
      }
    },
    async defined(){
      let that = this
　　　　//调取收藏列表数据
      const {data} = await collectGoods({pageSize: this.pageSize, pageIndex: this.pageIndex})
      if (data.code == 0) {
        this.ulList = this.ulList.concat(data.data.page.list)
　　　　　// 判断是否还有下一页，如果是pageIndex加一
        if (data.data.page.hasNextPage) {
          this.allLoaded = false
          this.pageIndex = this.pageIndex + 1
        } else {
          this.allLoaded = true       
        }                
        this.show = true
      }
    },
  }
}
</script>

<style lang="less">
.collection{
  .noPoster{
    margin-top: 5.333333rem /* 400/75 */;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999999;
    z-index: 0;
    background: #ffffff;
    div{
      display: flex;
      align-items: center;      
    }
    img{
      width: .746667rem /* 56/75 */;
      height: .8rem /* 60/75 */;
      margin-right: .32rem /* 24/75 */;
    }
  }
}
</style>