下拉刷新报错
来源:5-2 下拉刷新--松手刷新
迷失的小麦
2020-04-07 08:35:49
另,能不能解释下标识位pulling在这设置的目的以及使用的逻辑分析
if(this.pulling)return;
this.pulling=true;
this.pulling=false;
<template> <swiper :options="swiperOption" ref="swiper"> <!-- 下拉刷新 --> <div class="mine-scroll-pull-down" v-if="pullDown"> <me-loading :text="pullDownText" inline ref="pullDownLoading"></me-loading> </div> <swiper-slide> <slot></slot> </swiper-slide> <div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div> </swiper> </template> <script> import {swiper,swiperSlide} from 'vue-awesome-swiper'; import MeLoading from 'base/loading'; import { PULL_DOWN_HEIGHT, PULL_DOWN_TEXT_INIT, PULL_DOWN_TEXT_START, PULL_DOWN_TEXT_ING, PULL_DOWN_TEXT_END, PULL_UP_HEIGHT, PULL_UP_TEXT_INIT, PULL_UP_TEXT_START, PULL_UP_TEXT_ING, PULL_UP_TEXT_END } from './config'; export default { name: 'MeScroll', components:{ swiper, swiperSlide, MeLoading }, props:{ scrollbar:{ type:Boolean, default:true }, data:{ type:[Array,Object] }, pullDown:{ type:Boolean, default:false } }, data(){ return { pulling:false, pullDownText:PULL_DOWN_TEXT_INIT, swiperOption:{ direction: 'vertical', slidesPerView: 'auto', freeMode: true, setWrapperSize: true, scrollbar: { el: this.scrollbar ? '.swiper-scrollbar' : null, hide: true }, on:{ sliderMove:this.scroll, touchEnd:this.touchEnd } } }; }, watch:{ data(){ this.update(); } }, methods:{ update(){ this.$refs.swiper &&this.$refs.swiper.swiper.update(); }, scroll(){ const swiper=this.$refs.swiper.swiper; if(this.pulling)return; if(swiper.translate > 0){//下拉 if(!this.pullDown)return; this.pulling=true; if(swiper.translate > PULL_DOWN_HEIGHT){ this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START); //this.pullDownText='111';这样写就是直接修改data中的数据,会导致更新数据时发生闪动 }else{ this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT); } } }, touchEnd(){ const swiper=this.$refs.swiper.swiper; if(this.pulling)return; if(swiper.translate > 0){//下拉 if(!this.pullDown)return; swiper.allowTouchMove = false;// 禁止触摸 swiper.setTransition(swiper.params.speed); swiper.setTranslate(PULL_DOWN_HEIGHT); swiper.params.virtualTranslate = true;// 定住不给回弹 this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_ING); this.$emit('pull-down', this.pullDownEnd);// 触发一个事件 } }, pullDownEnd(){ const swiper = this.$refs.swiper.swiper; this.pulling=false; this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_END); swiper.params.virtualTranslate = false; swiper.allowTouchMove = true; swiper.setTransition(swiper.params.speed); swiper.setTranslate(0); } } }; </script> <style lang="scss" scoped> .swiper-container{ overflow: hidden; width: 100%; height: 100%; } .swiper-slide{ height: auto; } .mine-scroll-pull-down{ position: absolute; left: 0; bottom: 100%; width: 100%; height: 80px; } </style>
2回答
同学你好, 因为touchEnd触发的时候,pulling变成true了,所以touchEnd里面的内容执行不了。如下修改:
先执行touchEnd的内容把下拉定住,然后再去改变标识的值。
另外,这个标识主要是避免重复下拉的情况。即当现在已经处在下拉加载过程中,用户重复下拉,就直接return返回,不再重复执行下拉内容了。
默认是false, 也就是没有下拉。当执行下拉后,就设置为true。这样用户再次下拉时,执行if判断,为true直接return返回,后面代码就不执行了。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
迷失的小麦
提问者
2020-04-07
这个报错是没有设置标识位的时候出现的,如果添加了标识位就会失去变化提示文字和松手刷新的效果,不知如何解决
相似问题