我的滚动条一直不能滚动,我找不到原因

我的滚动条一直不能滚动,我找不到原因

//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中再回到首页,滚动条又能显示了

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕慕子 2019-08-28 10:05:57

同学你好, swiper-wrapper的高度不是我们自己设置的哦, 是使用swiper这个组件,根据填充的内容自己计算高度的。 同学这种情况可能是recommend组件获取数据渲染页面后没有触发swiper的更新事件,导致无法重新根据内容计算高度

建议: 可以尝试在mounted阶段, 使用一个定时器,延迟更新swiper组件的高度

http://img1.sycdn.imooc.com//climg/5d65e1150001fca405120333.jpg

如果还有疑惑, 可以将你的其他文件代码也粘贴过来, 便于老师准确高效的为你解决问题

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

  • 提问者 慕盖茨6589387 #1
    滚动条是出来了,但scrollbar-drag不见了,这是为什么
    2019-08-28 11:08:18
  • 好帮手慕慕子 回复 提问者 慕盖茨6589387 #2
    同学你好, 在你的另一个相似提问下给出了解答, 快去查看一下吧http://class.imooc.com/course/qadetail/148818 祝学习愉快~~~
    2019-08-28 15:21:25
好帮手慕慕子 2019-08-26 18:47:36

同学你好, 老师在源码中测试同学粘贴的这部分代码,滚动条是可以正常滚动的,那就说明可能不是这部分代码的问题, 可能是其他文件中的代码造成的影响

建议:同学也可以将你的这段代码放在源码中测试一下,然后对比查看一下其他文件,检查是否是哪里逻辑或者单词拼写有问题

如果还有疑惑, 可以将你的其他文件代码也粘贴过来, 便于老师准确高效的为你解决问题

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

  • 提问者 慕盖茨6589387 #1
    我发现我的swiper-wrapper的高度一直与swiper-container的高度一样,所以导航条不能显示,但我设置不了swiper-wrapper 的高度,这是哪出问题了
    2019-08-28 09:04:08
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师