背景，项目中经常会出现需要上拉加载更多或者下拉刷新的需求，一直以来呢都是借用各种UI库来实现，但是不知道啥情况，最近在使用的时候，一直有问题，出不了效果，然人很恼火，于是只能自己动手来实现以下，
这次做得呢也很简单，只做了上拉加载更多，思路其实很简单，搞一个组件，然后弄个插槽暴露出去放列表，然后在这个组件上监听touchstart，move,end等事件
我们一般只需要已经滑到最底部了，在上滑才需要判断是否加载更多
所以我们需要弄清楚几个条件
1，是否滑动到最底部了，如果是的话，那么在监听到上滑，就计算滑动的距离，如果距离达到了阈值，那么就加载更多
在处理加载的过程中，一般会给一些文字提示，比如，login中，已经没有更多了，...
2，如果没有滑动到最底部，那么就是普通的页面滑动，我们不做处理
大体上就是这些，大部分其他的库会有一些动画效果，我这里没加，具体代码如下：
1 <template> 2 <div class="pull-wrap" @touchstart="start" @touchmove="move" @touchend="end"> 3 <!--上拉加载组件--> 4 <slot ref="pull" class="pull-content"></slot> 5 <p v-if="isMoving" style="font-size: 20px;">pulling....</p> 6 <div class="is-loading" v-if="isLoading"> 7 <img class="loading" src="../assets/images/loading.svg" alt=""> 8 </div> 9 <div class="is-done" v-if="isDone">没有数据了</div> 10 </div> 11 </template> 12 13 <script> 14 export default { 15 name: 'Pull', 16 props: { 17 onPull: { // 上拉的回调 18 type: Function, 19 require: true 20 } 21 22 }, 23 data() { 24 return { 25 startY: 0, 26 moveY: 0, 27 isMoving: false, 28 isLoading: false, 29 isDone: false, 30 num: 1 // history list的页数 31 } 32 }, 33 methods: { 34 start(e) { 35 this.startY = e.touches[0].clientY; 36 console.log(this.startY); 37 }, 38 move(e) { 39 if (this.isDone) return 40 console.log('move', e.touches[0].clientY); 41 // 滑动时需要检测是否到底了，如果还没到底，就不要loading 42 // if (this.isLoading || this.isDone) return; 43 let flag = this.scrollToTheEnd(); 44 if (flag) { 45 this.isMoving = true 46 } 47 this.moveY = e.touches[0].clientY - this.startY; 48 }, 49 50 end() { 51 // this.isMoving = false 52 if (this.isLoading || this.isDone) return; 53 console.log('touchend', this.moveY); 54 if (this.moveY > -40) { 55 console.log('没超过', this.moveY); 56 this.isMoving = false; 57 } else { 58 console.log('达到条件了'); 59 let flag = this.scrollToTheEnd(); 60 console.log(flag, '到底了吗'); 61 if (!flag) return; 62 this.isMoving = false 63 this.num++; 64 this.isLoading = true; 65 this.onPull(this.num); 66 } 67 this.startY = 0; 68 this.moveY = 0; 69 }, 70 71 /** 72 * 判断滚动条是否到底 73 */ 74 scrollToTheEnd() { 75 let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop // 滚动的距离 76 let viewHeight = document.documentElement.clientHeight; // 可视区域高度 77 let offsetHeight = document.body.scrollHeight; // 总高度 78 console.log(scrollTop, viewHeight, offsetHeight, '----------------'); 79 // 滚动条到底部的条件 80 return (viewHeight + scrollTop) >= offsetHeight 81 } 82 }, 83 84 mounted() { 85 this.$on('loadEnd', () => { 86 console.log('load完毕了'); 87 this.isLoading = false 88 }) 89 90 this.$on('loadOver', () => { 91 console.log('没有了'); 92 this.isDone = true; 93 this.isLoading = false; 94 this.isMoving = false; 95 }) 96 97 } 98 } 99 </script> 100 101 <style scoped lang="scss"> 102 /*.pull-wrap{ 103 overflow: hidden; 104 &>.pull-content{ 105 transition: all .4s; 106 } 107 }*/ 108 .pull-wrap{ 109 font-size: 20px; 110 } 111 112 .loading{ 113 width: 50px; 114 height: 50px; 115 } 116 117 </style>
然后使用组件的如下：
<template>
<Pull :onPull="pull" ref="pull">
<p v-for="val in list">列表了{{val}}</p>p
</Pull>
</template>
<script>
import Pull from '../Pull'
methods:{
//这里就是加载更多的处理函数了，这里只是用定时器模拟了一下，需要将加载状态回传到子组件中去
pull(num) {
console.log('pull回调');
setTimeout(() => {
this.num = num;
if (this.history_list.length >= this.pk_list_data.others_family_list.length) {
console.log('完了');
this.$refs.pull.$emit('loadOver') // 加载完毕
} else {
this.$refs.pull.$emit('loadEnd') // 加载完毕
}
}, 2000)
},
}
</script>
这样，基本就做完了，