21技术分享-vue实战之复杂界面复杂数据去魅

在选房界面中，实现诸如此类的选定界面数据定位功能，初开始看到时：好家伙，好复杂的api数据，好复杂的数据构成！

这么复杂的数据还要定位到每一个类别，每一个样式的数据还要在各自的类别中精确定位到各个种类的数据占了多少个
是不是直接给人整蒙了？

 但是仔细一想，在vant中只需要调用现成组件库，再去vue中定义swipe组件，引入到detail的上级组件里，并定义一个Props属性即可：

const props = defineProps({
  swipeData: {
    type: Array,
    default: () => []
  }
})

使用时用一个vant现成的组件包裹住，里面根据vant官网给的api填入信息既可，

<van-swipe class="swipe-list" :autoplay="3000" indicator-color="white">

      <template v-for="(item, index) in swipeData">
        <van-swipe-item class="item">
          <img :src="item.url" alt="">
        </van-swipe-item>
      </template>

      <template #indicator="{ active, total }">
        <!-- <div class="indicator">{{ active }}/{{ swipeData.length }}-{{ total }}</div> -->
        <div class="indicator">
          <!-- 对象的遍历,需要用到value,key ,index，对象、key 这三样 -->
          <template v-for="(value, key, index) 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>
        </div>
      </template>

</van-swipe>

这里根据数据类型，把对象类型的数据转化为二维数据，这里给出一个简化的说明：

{
    [a,c,c,b,c],
    [a,x,g,v,t,q,1,],
    ...
}

用两次循环把对象中的数据取出，放入一个对象类型的二维数组即可
之后的数据处理中，

为了 实现在每个二位结构中对当前数据的定位，利用如下方式，直接求得对应数据的定位：

const getCategoryIndex = (item) => {
  const valueArray = swipeGroup[item.enumPictureCategory]
  return valueArray.findIndex(data => data === item) + 1
}

并且，在组件库中已经给出了active的嵌入api，只需要选中对象选中当前位置，就可以实现对当前轮播图中元素的定位：

<van-swipe>
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
  <template #indicator="{ active, total }">
    <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
  </template>
</van-swipe>

<style>
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
</style>

里面的active可以直接对应当前项目类型的图片的中的哪一张，用动态类型绑定即可判定
​​​​

:class="{ active: swipeData[active]?.enumPictureCategory == key }

最终，效果如下：

 确实很绕，但是分析源码之后，核心还是回到js和css的样式调整