复习一下效果

就在我以为大功告成的时候，产品过来说要点击文字的时跳转到对应的图片

这个思路比较明显，点击的时候我们需要获取点击的元素，取到值然后关联 swiper 。

但是因为在文字上覆盖了 swiper 所以需要当前显示的是哪 5 个标题，然后对应放到 swiper-item 中，如图所示

实现步骤

将 swiper-item 分为上下两部分
下部分为 5 块，分别对应显示的每个标题的 index
点击对应的标题块滑动到对应标题和蹄片

重点计算对应标题的 `index`

比如共有 50 个标题构成循环，index 如图

上述实现步骤最主要就是计算标题块的 index，主要考虑以下几种情况

显示区域的 index 是 [48,49,0,1,2],显示的区域包含了循环的链接处
显示区域的 inde 是 [1,2,3,4,5],显示区域不包含链接处

代码实现

_calcShowIndex()

接收的是点击 title 区域的元素
返回展示出标题对应的 index组 showIndex
返回展示出的标题的数组 showArr ,这个没用到可以不要


_calcShowIndex(e) {
    const current = e.detail.current;
    const { banner } = this.data;


    // 这里做判断
    let showArr,
      showIndex = [];

    // 取current前后2个值
    // 这里用于后续使用slice计算结束index
    const startIndex = current - 2;
    const endIndex = current + 3;
    // 不是从0开始的话
    if (startIndex < 0) {
      showArr = [...banner.slice(startIndex), ...banner.slice(0, endIndex)];
      console.log("showArr", showArr);
    }
    // 滚到了最后一个
    else if (endIndex > banner.length) {
      showArr = [
        ...banner.slice(startIndex),
        ...banner.slice(0, endIndex - banner.length),
      ];
    }
    // 正常的情况
    else {
      showArr = banner.slice(startIndex, endIndex);
    }
    for (let index = startIndex; index < endIndex; index++) {
      if (index < 0) {
        showIndex.push(banner.length + index);
      } else if (index >= banner.length) {
        console.log(startIndex);
        showIndex.push(index - banner.length);
      } else {
        showIndex.push(index);
      }
    }
    return { showArr, showIndex };
  },

如此一来我们就可以将显示的 showIndex 组填充到 swiper-item 的下半部分

最后在点击的时候将 currentIndex 设置为点击的 index 即可。

考虑后端返回的数据长度不统一情况

因为前端这里显示的都是后台运营所配置的内容，所以返回的数组不会统一长度，而我们这套计算角度的方法如果在一个角度组里数据过多或过少，就会出现显示错误

解决方法有点笨

配置多套方案，如果有更好的方法请联系我

const getConfig = (bannerLength) => {
  console.log(bannerLength);
  let config = {
    ROUND_GROUP_NUM: 0,
    ONE_GROUP_DEG: 0,
  };
  if (bannerLength === 1) {
  } else if (bannerLength >= 2 && bannerLength <= 4) {
    config = {
      ROUND_GROUP_NUM: 10,
      ONE_GROUP_DEG: 36,
    };
  }
  // else if...
  else {
    config = {
      ROUND_GROUP_NUM: 2,
      ONE_GROUP_DEG: 180,
    };
  }

  switch (bannerLength) {
    case 1:
      break;
    case 2:
      config = {
        ROUND_GROUP_NUM: 20,
        ONE_GROUP_DEG: 18,
        left: "63%",
        deg: 4,
      };
      break;
    // case 3 4 5 6 7 ...
    case 13:
      config = {
        ROUND_GROUP_NUM: 4,
        ONE_GROUP_DEG: 90,
        left: "60.4%",
        deg: 4,
      };
      break;

    default:
      break;
  }

}

总结

到此，整个轮盘的效果已经很完善了，总结一下

画出一个园按照中心点循环多个容器元素
利用swiper的滑动来联动改变角度旋转元素
计算出当前 index 的前后2个 index
点击后跳转到点击的 index 元素

完结撒花~

在小程序中实现swiper联动轮盘滚动（二）——点击滚动到对应元素