# vue-awesome-swiper 自定义分页器
- 今天写自定义分页 踩了一些坑，记录一下
- 首选使用的是 Directive 指令的方式，nuxtjs (Vue 项目也是相同)
# 自定义分页器
<div class="slide-wrapper">
<div class="slide_web" v-swiper:swiper="swiperOption2">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(slide, k) in userSlideList" :key="k">
<img :src="slide.img"/>
</div>
</div>
</div>
<div class="swiper-pagination" slot="pagination" id="custom">
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
data() {
return {
const vm = this
swiperOption2: {
effect: 'coverflow',
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
loopedSlides: 1,
slidesPerView: 1,
centeredSlides: true,
coverflowEffect: {
rotate: 0,
depth: 20,
slideShadows : false
},
pagination: {
el: '.swiper-pagination',
type: 'custom',
clickable: true, // 自定义分页加了这个 没效果
renderCustom: function (swiper, current, total) { // 这里因为 this 作用域的关系，不能直接使用 this 获取 Vue 相关内容，通过上面的 const vm = this，使用 vm 获取
const _html = '';
for (let i = 1; i <= total; i++) {
if (current == i) {
_html += `<div class="swiper-pagination-custom-item">
<div class="image-wrap active" index="${i}">
<img class="custom-img" index="${i}" src="${vm.thumbsList[i - 1].img}" alt="">
</div>
<span>${vm.thumbsList[i - 1].text}</span>
</div>`
} else {
_html += `<div class="swiper-pagination-custom-item">
<div class="image-wrap" index="${i}">
<img class="custom-img" index="${i}" src="${vm.thumbsList[i - 1].img}" alt="">
</div>
<span>${vm.thumbsList[i - 1].text}</span>
</div>`
}
}
return _html
}
}
},
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
- 但是点击事件没有生效，点击分页器需要 轮播图 随着改变
# 自定义点击事件
- 要在自定义分页器上在加上点击事件， 说一下我的思路，因为 上面的 renderCustom 每次都会重新赋值，直接使用 onclick 方式不行，也不能传参，所以我就借用了 冒泡 的机制。通过获取标签上的自定义属性，获取当前需要点击跳转的 index
mounted() {
this.customBox = document.getElementById('custom')
this.customBox.addEventListener('click', this.handleClick, false)
},
methods: {
handleClick(e) {
// 获取目标元素，拿到目标元素上的 index 值
const current = e.target
const toCount = current.attributes["index"].value || ''
// 跳转到指定的 swiper 页面
if (toCount) {
this.swiper.slideTo(toCount)
}
}
},
destroyed() {
this.customBox.removeEventListener('click', this.handleClick, false)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 多个 swiper 联动效果
- 使用场景，例如缩略图要和轮播图联动，但是如果只是这样，可以使用我上面说的自定义 分页器，我这里联动是因为还要和另一个 轮播图联动，一共三个联动😭
- 例如：
<div class="swiper-container">
<div class="slide_web slide-title-wrap" v-swiper:swiper="swiperOption1">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-no-swiping" v-for="(slide, k) in textList" :key="k">
<div class="title">{{slide.title}}</div>
<span class="subtitle">{{slide.subtitle}}</span>
</div>
</div>
</div>
<div class="slide-wrapper">
<div class="slide_web" v-swiper:swiperTop="swiperOption2">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(slide, k) in userSlideList" :key="k">
<img :src="slide.img"/>
</div>
</div>
</div>
<div class="swiper-pagination" slot="pagination" id="custom">
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- 联动
mounted() {
this.$nextTick(() => {
const swiper1 = this.swiper
const swiper2 = this.swiperTop
swiper2.controller.control = swiper1
swiper1.controller.control = swiper2
})
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8