<template>

     <!-- <swiper :options="sliderOptions"> 滚轮与轮播的参数是不一样的""-->

    <swiper :options="swiperOption" ref="swiper" class="swiper-container">

        <div class="mine-scroll-pull-down" v-if="pullDown">

            <c-loading :text="pullDownText" inline ref="pullDownLoading"></c-loading>

        </div>

        <swiper-slide class="swiper-slide">

             <slot></slot>

         </swiper-slide>

        <div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>

    </swiper>

</template>

<script>

import {sliderOptions} from 'pages/home/config';

import {swiper,swiperSlide} from 'vue-awesome-swiper'

// import 'swiper/dist/css/swiper.css';

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,

       'c-loading': MeLoading

    },

    props: {//props是子组件访问父组件数据的唯一接口

        scrollbar: {

            type: Boolean,

            default: true

        },

         data:{

             type:[Array, Object]

         },

         pullDown:{

             type: Boolean,

            default: false

         }

    },

    data(){

        return{

            pullDownText: PULL_UP_TEXT_INIT,//'再拉就刷给你看'在config中定义了',

           // sliderOptions: {

                swiperOption: {

            direction: 'vertical',

            slidesPerView: 'auto',

            freeMode: true,

            setWrapperSize: true,

            mousewheel: true,

            scrollbar: '.swiper-scrollbar',

            // autoheight:true

            //scrollbar表示显示滚动

            scrollbar: {

                el: this.scrollbar ? '.swiper-scrollbar' : null,

                hide: true

            },

            on: {//以下参数是插件中已经规定好的

                sliderMove: this.scroll,

                touchEnd : this.touchEnd

            }

                }   

        };

    },

   watch: {

       data(){

           this.update()

       }

   },

//    mounted() {

//        let _this = this

//        setTimeout(function(){

//            _this.update();

//        },3000)

//    },

   methods: {

       update(){

           //如果存在就调用swiper下的updata

           this.$refs.swiper && this.$refs.swiper.swiper.update();

       },

       scroll(){//滚动出现文字的条件方法

           const swiper = this.$refs.swiper.swiper;//获取swiper插件

           if(swiper.translate > 0){

               if(!this.pullDown){//用户没有下拉，直接返回

                   return;

               }

               if(swiper.translate > PULL_DOWN_HEIGHT){

                //    this.pullDownText = '111';//直接给第三方插件传值，下拉功能获取数据的时候会影响页面的闪动,原因是重新获取数据渲染

                   this.$refs.pullDownLoading.setText(PULL_UP_TEXT_START);

               }else{

                   this.$refs.pullDownLoading.setText(PULL_UP_TEXT_INIT);

               }

           }

       },

       touchEnd(){

            const swiper = this.$refs.swiper.swiper;//获取swiper插件

            if(!this.pullDown){

                return;

            }

             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);// 触发一个事件

       }

   },

    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: 3000px;

    // height:300px;

}

.swiper-slide{

    height:auto;

}

 .swiper-container设置高度100%，就无法滚动，设置小于数据本身的高度值就能滚动，老师写的是100%，为什么可以滚动？容器不够大才需要滚动条查看下面的内容，容器和内容一样高，还需要滚动条吗？不明白老师这样设置？或者我其他地方写错了？