老师你好~~
<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="mine-scroll-pull-up" v-if="pullUp">
<me-loading :text="pullDownText" inline ref="pullDownLoading"></me-loading>
</div>
<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
},
pullDown: {
type: Boolean,
default: false
},
pullUp: {
type: Boolean,
default: false
}
},
data: {
type: [Array, Object]
},
data() {
return {
pulling: false,
pullDownText:PULL_DOWN_TEXT_INIT,
pullUpText: 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.updata();
}
},
methods: {
updata() {
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;
}
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);
}
}
},
touchEnd() {
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);
}
}
}
</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
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星