添加pulling标志项之后下拉刷新失效
不知道哪里出了问题,望老师解惑。这个是scroll/index
<template>
<swiper :options="swiperOption" ref="swiper">
<div class="mine-scroll-pull-dowm" v-if="pullDown">
<me-loading :text="pullDownText" inline ref="pullDownLoading"/>
</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
} 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() {
// console.log(this.$refs.swiper);
this.$refs.swiper && this.$refs.swiper.swiper.update();
},
scroll() {
const swiper = this.$refs.swiper.swiper;
// console.log(this.pulling)
if (this.pulling) {
return;
}
if (swiper.translate > 0) {
if (!this.pullDown) {
return;
}
console.log(swiper.translate)
this.pulling = true;
if (swiper.translate > PULL_DOWN_HEIGHT) {
this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);
}else {
this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT);
}
}
},
touchEnd() {
if (this.pulling) {
return;
}
const swiper = this.$refs.swiper.swiper;
if(swiper.translate > PULL_DOWN_HEIGHT) {
if(!this.pullDown) {
return;
}
this.pulling = true;
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-dowm {
position: absolute;
left: 0;
bottom: 100%;
width: 100%;
height: 80px;
}
</style>1
收起
正在回答
1回答
同学你好,只需要在touchEnd里面把pulling值改为true就可以了,其他地方是不需要把值改为true的

同学修改后再测试下。
如果帮助到了你,欢迎采纳~祝学习愉快~
热门框架Vue开发WebApp 18版
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星