【vue】下拉、上拉刷新

 我这里就把主要的下拉刷新的写一下，上拉是一样的道理，就不写了

       <div class="talk_top" ref="listWrapper" id="listWrapper"><div class="loadingpic" v-loading="loading"></div><div v-for="message in messages" :key="message.id" class="message"><div class="minetext" v-html="message.text"></div></div></div>

<script>
export default {data() {return {loading: false, // 加载中messages:[],}},mounted() {this.$nextTick(() => {// this.getList(); // 初始化数据this.re();});},methods: {//数据接口getlist() {// this.page++;// this.loading = true;// this.$apiUrl.lmo_goods(data).then(res => {// 加载完// if (this.messages.length >= Number(10)) {//   this.loading = false;//   return;// }this.loading = false;// this.messages = this.messages.concat({ isMe: false, text: "11" });// this.total = Number(4);this.messages.unshift({ isMe: false, text: "下拉刷新" });// });},// 下拉、上拉刷新re() {var flag = false;var PstartX;var PstartY;var PMoveX;var PMoveY;var PendX;var PendY;let that = this;document.onmousedown = function(ev) {flag = true;PstartX = ev.pageX;PstartY = ev.pageY;// console.log("start:" + PstartX, PstartY);document.onmousemove = function(ev) {PMoveX = ev.pageX;PMoveY = ev.pageY;if (flag) {// console.log("move:" + PMoveX, PMoveY);var resutl = getpostion(PMoveY, PstartY);switch (resutl) {case 0:// console.log("无操作");break;case 1:// console.log("向上");break;case 2:// console.log("向下");if (PMoveY - PstartY > 0) {if (PMoveY - PstartY >= 50) {document.getElementById("listWrapper").style.marginTop =PMoveY - PstartY + "px";}that.loading = true;// document.getElementById("loadingpic").style.display = "block";}break;}}};document.onmouseup = function(ev) {flag = false;PendX = ev.pageX;PendY = ev.pageY;// console.log("end:" + PendX, PendY);var resutl = getpostion(PMoveY, PstartY);switch (resutl) {case 0:// console.log("无操作");break;case 1:// console.log("向上");break;case 2:// console.log("向下");// location.reload();setTimeout(() => {that.getlist(); //调用接口//回弹到初始位置document.getElementById("listWrapper").style.marginTop = "0px";}, 500);break;}};// 判断是上拉还是下拉function getpostion(PMoveY, PstartY) {if (PMoveY - PstartY == 0) {return 0; //无操作}if (PMoveY - PstartY < 0) {return 1; //向上}if (PMoveY - PstartY > 0) {return 2; //向下}}};},}
}
</script>

在他的基础上修改了一下，他的上面有点小问题https://www.cnblogs.com/zmcxsf/p/10443189.html