效果: 鼠标拖动, 自动上下滚动
使用,awesome-swiper是基于swiper, 需要下载两个插件: 注意版本:
"swiper": "4.5.1",
"vue-awesome-swiper": "3.1.3",
效果实现 思路:
将接口数据修改成二维数组:
getHonor() {
this.$apis.volunteer.getHonor({ }).then(({ data }) => {
var len = data.list.length
var arr = []
for (var i = 0; i < len; i += 4) {
arr.push(data.list.slice(i, i + 4))
}
this.honorList = arr
this.$nextTick(() => {
this.swiperOption.loopAdditionalSlides = this.honorList.length
this.swiperOption.autoplay = this.honorList.length > 3
// this.swiper.update(true)
})
})
},
swiper 配置:
swiperOption: {
direction: 'vertical',
loopAdditionalSlides: 3,
observer: true,
// 修改swiper自己或子元素时,自动初始化swiper
observeParents: true,
// 修改swiper的父元素时,自动初始化swiper
autoplay: true,
loop: true,
height: 120,
speed: 4000,
resize: () => {
this.swiper.params.height = document.documentElement.getElementsByClassName(
'mans'
)[0].offsetHeight
this.swiper.update(true)
}
}
后台数据,动态修改loopAdditionalSlides 属性, autoplay属性
loopAdditionalSlides :决定循环产生几行(swiper API)
autoPLay: 如果接口数据超出12组, 大于三行,需要自动滚动
this.$nextTick(() => {
this.swiperOption.loopAdditionalSlides = this.honorList.length
this.swiperOption.autoplay = this.honorList.length > 3
// this.swiper.update(true)
})