loading.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <div v-if="nextFlag">
  3. <div class="weui-loadmore" v-if="loading">
  4. <i class="weui-loading"></i>
  5. <span class="weui-loadmore__tips"><img src="../img/loading.gif"></span>
  6. </div>
  7. <div class="loading-com" v-else @click="loadMore">
  8. <div>加载更多</div>
  9. </div>
  10. </div>
  11. <div v-else class="weui-loadmore weui-loadmore_line">
  12. <span class="weui-loadmore__tips"></span>
  13. </div>
  14. </template>
  15. <script>
  16. import Vue from 'vue'
  17. export default {
  18. props : {
  19. nextFlag : true,
  20. loading : true
  21. },
  22. mounted() {
  23. let self = this
  24. $(window).scroll(function () {
  25. let scrollTop = $(this).scrollTop()
  26. let screenHeight = $(window).height()
  27. let $this = $(this)
  28. let bodyHeight = $('body').height()
  29. self.$emit('addScrollEvent')
  30. if(self.nextFlag==0 || self.loading) return
  31. if (scrollTop + screenHeight + 65 >= bodyHeight && !self.isloading) {
  32. self.$emit('getLoadMore')
  33. }
  34. })
  35. },
  36. methods : {
  37. loadMore() {
  38. this.$emit('getLoadMore')
  39. }
  40. }
  41. }
  42. </script>