element走马灯自动_单页面全屏滚动效果使用element 跑马灯组件实例

别的不多说了  直接上代码吧

methods: {

rollNumFn (val) {

if (val === 1 || val === 3 || val === 5) this.addClass = 1

else this.addClass = 0

},

deferred (fn, wait) {

let timeout

return function () {

const context = this

const args = arguments

if (timeout) clearTimeout(timeout)

timeout = setTimeout(() => {

fn.apply(context, args)

}, wait)

}

},

handleScroll (e) {

if (e.deltaY > 0) this.$refs.carouselFull.next()

else this.$refs.carouselFull.prev()

},

handleKeyup (e) {

if (e.keyCode === 38) {

this.$refs.carouselFull.prev()

} else if (e.keyCode === 40) {

this.$refs.carouselFull.next()

}

},

eventListenerHandle (sign) {

const dom = this.$refs.fullGroup

dom[sign](‘mousewheel‘, this.deferred(this.handleScroll, 300), true) ||

dom[sign](‘DOMMouseScroll‘, this.deferred(this.handleScroll, 300), false)

window[sign](‘keyup‘, this.handleKeyup)

}

},

mounted () {

this.eventListenerHandle(‘addEventListener‘)

},

beforeDestroy () {

this.eventListenerHandle(‘removeEventListener‘)

}