咦？我滚动条呢？

<br>

继各种报错之后，我滚动条又没了。。。。之前插槽slot写成solt把我人都给找懵了，大伙儿帮看看又是哪儿打错了

losting 2020-01-05

源自：实战：Vue webAPP首页开发 3-2 滚动条组件

收起

4回答

好帮手慕码 2020-01-06 10:04:14

同学你好，老师测试你的代码确实是有滚动条的(换浏览器测试也是有的)，如下：

可能是其他的页面影响到了，同学可以先和源码对比一下，哪里写的有问题。如果还是没有找到问题的话，且考虑到代码比较多，建议同学新建提问，将相关代码（home/index.vue和scroll/index.vue）都粘贴至问答区，以便准确的帮助同学分析解决问题！

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

好帮手慕码 2020-01-05 19:31:17

同学你好，老师测试同学提供的代码是有滚动条的，如下：

建议同学关闭项目后，重新启动测试一下（或者可以清除浏览器缓存）。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

提问者 losting #1

难受了，重启后滚动条还是没有，而且没有了下拉上拉的过度效果很生硬。。拉到一半还卡住了的样子。。。

2020-01-06 05:18:01

提问者 losting 2020-01-05 17:00:22

<template>
  <swiper :options="swiperOption">
    <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";
export default {
  name: "MeScroll",
 
  components: {
    swiper,
    swiperSlide
  },
  props: {
    scrollbar: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      swiperOption: {
        direction: "vertical",
        slidesPerView: "auto",
        freeMode: true,
        setWrapperSize: true,
        scrollbar: {
          el: this.scrollbar ? ".swiper-scrollbar" : null,
          hide: true
        }
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.swiper-container {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.swiper-slide {
  height: auto;
}
</style>

收起回答

好帮手慕码 2020-01-05 13:43:13

同学你好，建议将代码粘贴至问答区进行提问，以便准确的帮助同学分析解决问题！

祝学习愉快~

收起回答

提问者 losting #1

<template> <swiper :options="swiperOption"> <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"; export default { name: "MeScroll", components: { swiper, swiperSlide }, props: { scrollbar: { type: Boolean, default: true } }, data() { return { swiperOption: { direction: "vertical", slidesPerView: "auto", freeMode: true, setWrapperSize: true, scrollbar: { el: this.scrollbar ? ".swiper-scrollbar" : null, hide: true } } }; } }; </script> <style lang="scss" scoped> .swiper-container { overflow: hidden; width: 100%; height: 100%; } .swiper-slide { height: auto; } </style>

2020-01-05 16:59:06
提问者 losting #2

。。。，找了好久都找不到。我整个人可能有bug了。。。可以把这个东西做个找不同的游戏。。

2020-01-05 17:03:15