我的滚动条一直不能滚动,我找不到原因
//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 星