轮播图自定义指示器_vant中轮播图怎么设置显示指示器的样式

轮播图自定义指示器

思路：

自定义指示器中有相应的分组，并且显示当前页和此分组总共的页数，vant中提供了自定义的插槽，我们可以在插槽中写对应数据。首先对从后台得到的数据进行分组处理，之后在页面上做相应显示

效果：

数据的处理

从后台得到的数据并没有对相应数据分组，得到的是总的数据。遍历一遍数据，用对象存储，把相同类别的放在一个数组中，类别为key，数组为value，这样方便对后续指示器的显示进行处理

const swipeGroup = {}

// 思路二: 一次循环
for (const item of props.swipeData) {
  let valueArray = swipeGroup[item.enumPictureCategory]
  if (!valueArray) {
    valueArray = []
    swipeGroup[item.enumPictureCategory] = valueArray
  }
  valueArray.push(item)
}
1
2
3
4
5
6
7
8
9
10
11

在页面进行显示

页面显示的问题就是怎么确定哪个active，怎么更改图中的数字，如下代码

插槽中会传进来active的index，这样就能在原始数据中找到它的类别，与处理后的数据对比，相同便给其active样式（高亮和显示数字）；当前图片在所处类别中的序号处理，在处理后的数据中找此类别数组，然后查找它的索引

  <template v-for="(value, key) in swipeGroup" :key="key">
            <span 
              class="item" 
              :class="{ active: swipeData[active]?.enumPictureCategory == key }"
            >
              <span class="text">{{ getName(value[0].title) }}</span>
              <span class="count" v-if="swipeData[active]?.enumPictureCategory == key">
                {{ getCategoryIndex(swipeData[active]) }}/{{ value.length }}
              </span>
            </span>
          </template>
const getCategoryIndex = (item) => {
//从active，在group中找到对应类别的数组，
  const valueArray = swipeGroup[item.enumPictureCategory]
  return valueArray.findIndex(data => data === item) + 1
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

ray.findIndex(data => data === item) + 1
}

1