请问老师 为什么我每次下拉的时候 都有一个报错呢？
<template>
<swiper :options="swiperOption" ref="swiper">
<div class="mine-scroll-pull-down" v-if="pullDown">
<me-loading :text="pullDownText" inline ref="pullDownLoading" />
</div>
<swiper-slide>
<slot></slot>
</swiper-slide>
<div class="mine-scroll-pull-up" v-if="pullUp">
<me-loading :text="pullDownText" inline ref="pullUpLoading" />
</div>
<div class="swiper-scrollber" 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
},
pullUp: {
type: Boolean,
default: false
}
},
// data() {
// return {
// pulling: false,
// pullDownText: PULL_DOWN_TEXT_INIT,
// pullUpText: PULL_UP_TEXT_INIT,
// swiperOption: {
// direction: "vertical",
// slidesPerView: "auto",
// freeMode: true,
// setWrapperSize: true,
// scrollber: {
// el: this.scrollber ? ".swiper-scrollbar" : null,
// hide: true
// },
// on: {
// sliderMove: this.scroll,
// touchEnd: this.touchEnd
// }
// }
// };
// },
watch: {
data() {
this.update();
}
},
created() {
this.init();
},
methods: {
init() {
this.pulling = false;
this.pullDownText = PULL_DOWN_TEXT_INIT;
this.pullUpText = PULL_UP_TEXT_INIT;
this.swiperOption = {
direction: "vertical",
slidesPerView: "auto",
freeMode: true,
setWrapperSize: true,
scrollber: {
el: this.scrollber ? ".swiper-scrollbar" : null,
hide: true
},
on: {
sliderMove: this.scroll,
touchEnd: this.touchEnd,
transitionEnd: this.scrollEnd
}
};
},
scrollToTop(speed, runCallbacks) {
this.$refs.swiper &&
this.$refs.swiper.swiper.slideTo(0, speed, runCallbacks);
},
update() {
this.$refs.swiper && this.$refs.swiper.swiper.update();
},
scroll() {
const swiper = this.$refs.swiper.swiper;
this.$emit("scroll", swiper.translate, this.$refs.swiper.swiper);
if (this.pulling) {
return;
}
if (swiper.translate > 0) {
//下拉
if (!this.pullDown) {
return;
}
if (swiper.translate > PULL_DOWN_HEIGHT) {
this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);
} else {
this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT);
}
} else if (swiper.isEnd) {
if (!this.pullUp) {
return;
}
const isPullUp =
Math.abs(swiper.translate) + swiper.height - PULL_UP_HEIGHT >
parseInt(swiper.$wrapperEl.css("height"));
if (isPullUp) {
this.$refs.pullUpLoading.setText(PULL_UP_TEXT_START);
} else {
this.$refs.pullUpLoading.setText(PULL_UP_TEXT_INIT);
}
}
},
scrollEnd() {
this.$emit(
"scroll-end",
this.$refs.swiper.swiper.translate,
this.$refs.swiper.swiper
);
},
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);
} else if (swiper.isEnd) {
//底部
const totalHeight = parseInt(swiper.$wrapperEl.css("height"));
const isPullUp =
Math.abs(swiper.translate) + swiper.height - PULL_UP_HEIGHT >
totalHeight;
if (isPullUp) {
if (!this.pullUp) {
return;
}
this.pulling = true;
swiper.allowTouchMove = false; // 禁止触摸
swiper.setTransition(swiper.params.speed);
swiper.setTranslate(-(totalHeight + PULL_UP_HEIGHT - swiper.height));
swiper.params.virtualTranslate = true; // 定住不给回弹
this.$refs.pullUpLoading.setText(PULL_UP_TEXT_ING);
this.$emit("pull-up", this.pullUpEnd);
}
}
},
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);
setTimeout(() => {
this.$emit("pull-down-transition-end");
}, swiper.params.speed);
},
pullUpEnd() {
const swiper = this.$refs.swiper.swiper;
this.pulling = false;
this.$refs.pullUpLoading.setText(PULL_DOWN_TEXT_END);
swiper.params.virtualTranslate = false; //
swiper.allowTouchMove = true; //
}
}
};
</script>
<style lang='scss' scoped>
.swiper-container {
overflow: hidden;
width: 100%;
height: 100%;
}
.swiper-slide {
height: auto;
}
.mine-scroll-pull-up,
.mine-scroll-pull-down {
position: absolute;
left: 0;
width: 100%;
}
.mine-scroll-pull-down {
bottom: 100%;
height: 80px;
}
.mine-scroll-pull-up {
top: 100%;
height: 30px;
}
</style>
正在回答 回答被采纳积分+1
不明白哪里有问题，我找了一下 一直提示newDATA 没有定义，我不了解，这个newData在哪里
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue，结合多个实战案例，还原真实开发场景，最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星