以下内容整理自《慕课网vue音乐app》
在这一节，会封装一些公用的函数来添加classname，改变image的宽度。
具体如下：
首先：封装一个slider的组件
文章图片
样式如下：
文章图片
.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%【vue慕课网音乐项目手记（5-手写滚动轮播图（上））】紧接着就是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来让图片轮播：
文章图片
到此完成轮播图第一部分。
