|
@@ -1,13 +1,13 @@
|
1
|
1
|
<template>
|
2
|
2
|
<div class="swiper">
|
3
|
3
|
<van-swipe :autoplay="3000" @change="onChange" ref="swipe">
|
4
|
|
- <van-swipe-item v-for="(item, index) in images" :key="index">
|
|
4
|
+ <van-swipe-item v-for="(item, index) in imageList" :key="index">
|
5
|
5
|
<van-image height="300" :src="item.image" @click="onPerView(index)" />
|
6
|
6
|
</van-swipe-item>
|
7
|
7
|
<template #indicator>
|
8
|
8
|
<div class="swiper-indicator" ref="indicator">
|
9
|
9
|
<span
|
10
|
|
- v-for="(item, index) in images"
|
|
10
|
+ v-for="(item, index) in imageList"
|
11
|
11
|
:key="index"
|
12
|
12
|
:class="{ active: current === index }"
|
13
|
13
|
>
|
|
@@ -16,33 +16,12 @@
|
16
|
16
|
</div>
|
17
|
17
|
</template>
|
18
|
18
|
</van-swipe>
|
19
|
|
- <!-- <div class="swiper-tabs">
|
20
|
|
- <van-tabs
|
21
|
|
- v-model:active="current"
|
22
|
|
- background="rgba(0, 0, 0, 0.69)"
|
23
|
|
- line-width="0"
|
24
|
|
- color="#fff"
|
25
|
|
- title-active-color="#d75e3a"
|
26
|
|
- @click="onClickTab"
|
27
|
|
- >
|
28
|
|
- <template v-for="(item, index) in images" :key="index">
|
29
|
|
- <van-tab :title="item.text" />
|
30
|
|
- </template>
|
31
|
|
- </van-tabs>
|
32
|
|
- </div> -->
|
33
|
19
|
</div>
|
34
|
20
|
</template>
|
35
|
21
|
|
36
|
22
|
<script>
|
37
|
|
-import { ref } from 'vue'
|
38
|
|
-import {
|
39
|
|
- Swipe,
|
40
|
|
- SwipeItem,
|
41
|
|
- Image as VanImage,
|
42
|
|
- ImagePreview,
|
43
|
|
- Tabs,
|
44
|
|
- Tab,
|
45
|
|
-} from 'vant'
|
|
23
|
+import { computed, ref } from 'vue'
|
|
24
|
+import { Swipe, SwipeItem, Image as VanImage, ImagePreview } from 'vant'
|
46
|
25
|
|
47
|
26
|
export default {
|
48
|
27
|
name: 'swiper',
|
|
@@ -50,8 +29,6 @@ export default {
|
50
|
29
|
[Swipe.name]: Swipe,
|
51
|
30
|
[SwipeItem.name]: SwipeItem,
|
52
|
31
|
[VanImage.name]: VanImage,
|
53
|
|
- [Tabs.name]: Tabs,
|
54
|
|
- [Tab.name]: Tab,
|
55
|
32
|
},
|
56
|
33
|
props: {
|
57
|
34
|
images: {
|
|
@@ -65,6 +42,18 @@ export default {
|
65
|
42
|
const swipe = ref()
|
66
|
43
|
const indicator = ref()
|
67
|
44
|
|
|
45
|
+ const imageList = computed(() => {
|
|
46
|
+ const list = (props.image || []).filter(Boolean)
|
|
47
|
+ return list.length
|
|
48
|
+ ? list
|
|
49
|
+ : [
|
|
50
|
+ {
|
|
51
|
+ image: 'https://img01.yzcdn.cn/vant/custom-empty-image.png',
|
|
52
|
+ text: '暂无图片',
|
|
53
|
+ },
|
|
54
|
+ ]
|
|
55
|
+ })
|
|
56
|
+
|
68
|
57
|
const onChange = (index) => {
|
69
|
58
|
current.value = index
|
70
|
59
|
// indicator.value.scrollTo({ left: 1000 })
|
|
@@ -89,6 +78,7 @@ export default {
|
89
|
78
|
swipe,
|
90
|
79
|
current,
|
91
|
80
|
indicator,
|
|
81
|
+ imageList,
|
92
|
82
|
onChange,
|
93
|
83
|
onPerView,
|
94
|
84
|
onClickTab,
|
|
@@ -122,6 +112,7 @@ export default {
|
122
|
112
|
display: flex;
|
123
|
113
|
flex-wrap: nowrap;
|
124
|
114
|
font-size: 0.85em;
|
|
115
|
+ min-width: 100vw;
|
125
|
116
|
|
126
|
117
|
span {
|
127
|
118
|
display: inline-block;
|