下拉刷新报错
来源: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
这个报错是没有设置标识位的时候出现的,如果添加了标识位就会失去变化提示文字和松手刷新的效果,不知如何解决
相似问题