我的滚动条一直不能滚动,我找不到原因
//SCROLL的代码
<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="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 {
pullDownText: '再拉,再拉就刷给你看',
swiperOption: {
direction: 'vertical',
slidesPerView: 'auto',
freeMode: true,
setWrapperSize: true,
scrollbar: {
el: this.scrollbar ? '.swiper-scrollbar' : null,
hide: true
},
on: {
sliderMove: this.scroll
}
}
};
},
watch: {
data() {
this.update();
}
},
methods: {
update() {
this.$refs.swiper && this.$refs.swiper.swiper.update();
},
scroll() {
const swiper = this.$refs.swiper.swiper;
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);
}
}
}
}
};
</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>但我点进二级product中再回到首页,滚动条又能显示了
3
收起
正在回答 回答被采纳积分+1
2回答
4.Vue与React高级框架开发
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程

恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星