vue慕課網音樂項目手記:5-手寫滾動輪播圖(上)
阿新 • • 發佈:2018-06-14
flow overflow box cor 慕課 efs PE osi 通過
在這一節,會封裝一些公用的函數來添加classname,改變image的寬度。
具體如下:
首先:封裝一個slider的組件
<template> <div class="slider" ref="slider"> <div class="slider-group" ref="sliderGroup"> <slot></slot> </div> <div class="dots"></div> </div> </template>
樣式如下:
.slider min-height: 1px .slider-group position: relative overflow: hidden white-space: nowrap .slider-item float: left box-sizing: border-box overflow: hidden text-align: center a display: block width: 100% overflow: hidden text-decoration: none img display: block width: 100%
緊接著就是js部分的代碼了。
export default { name: ‘Slider‘, props: { loop: { type: Boolean, default: true }, autoPlay: { type: Boolean, default: true }, interval: { type: Number, default: 4000 } }, mounted () { setTimeout(()=> { this._setSliderWidth() this._initSlider() }, 20) }, methods: { _setSliderWidth () { this.children = this.$refs.sliderGroup.children let width = 0 let sliderWidth = this.$refs.slider.clientWidth for (let i = 0; i < this.children.length; i++) { let child = this.children[i] addClass(child, ‘slider-item‘) child.style.width = sliderWidth + ‘px‘ width += sliderWidth } if (this.loop) { width += 2 * sliderWidth } this.$refs.sliderGroup.style.width = width + ‘px‘ }, _initSlider () { } } }
export function addClass (el, className) { if (hasClass(el, className)) { return } let newClass = el.className.split(‘ ‘) newClass.push(className) el.className = newClass.join(‘ ‘) } export function hasClass (el, className) { let reg = new RegExp(‘(^|\\s)‘ + className + ‘(\\s|$)‘) return reg.test(el.className) }
遇到的問題:上面這樣寫完後。slide-item的class名字不能添加上,什麽原因。
在這裏的問題我反復看了一下,具體的意思如下。
這樣,就解決了。
然後呢,通過betterscroll來讓圖片輪播:
vue慕課網音樂項目手記:5-手寫滾動輪播圖(上)