//在mounted()方法里监听mousewheel；
// chrome and ie
window.addEventListener('mousewheel',this.handleScroll,false)
//// firefox
window.addEventListener"DOMMouseScroll",this.handleScroll,false)

export default {
       mounted (){
            this.imgHeight = document.documentElement.clientHeight || document.body.clientHeight;
            window.addEventListener('mousewheel',this.handleScroll,false)
        },
        data () {
            return {
                items:[
                    {
                        'url':require("./assets/pin_01.jpg"),
                    },
                    {
                        'url':require("./assets/pin_02.jpg"),
                    },
                    {
                        'url':require("./assets/pin_03.jpg"),
                    }
                ],
                isShow:true,
                nowIndex:0,
                imgHeight:""
            }
        },
         methods:{
            goto(index){
                this.isShow = false
                setTimeout(() => {
                    this.isShow = true
                    this.nowIndex = index
                }, 10)
            },
            handleScroll (e) {
              //var direction = e.deltaY>0?'down':'up' 该语句可以用来判断滚轮是向上滑动还是向下
              if(document.getElementsByTagName("li").length == 1){   //此处决定无论一次滚轮滚动的距离是多少，此事件                                                              
                                                           //都得等上次滚动结束，才会执行本次
                   this.isShow = false
                    setTimeout(() => {
                        this.isShow = true
                        ++ this.nowIndex
                        if(this.nowIndex == 3){
                        this.nowIndex = 0
                    }
                    }, 10)
                }
            }
             
           }
  }

<template>
  <div id="app">
    <div class="img-div" v-bind:style="{ height: imgHeight + 'px' }">
        <ul>
            <transition name="slide">
                <li v-if="isShow">
                    <img :src="items[nowIndex].url" v-bind:style="{ height: imgHeight + 'px' }" >
                </li>
            </transition>
            <transition name="slideLeave" >
                <li  v-if="!isShow">
                    <img :src="items[nowIndex].url" v-bind:style="{ height: imgHeight + 'px' }">
                </li>
            </transition>
        </ul>
    </div>
  </div>
</template>