使用vant轮播组件swipe

1、需求背景

一个tab栏目上最多可以放置4个图标入口，根据需要可以动态增加或者减少图标数量，图标数量增加时可以滑动到下一页展示。

2、技术路径

3、具体实现

按照官网手册引入需要的组件

main.js 复制代码

import { createApp } from 'vue';
import { Swipe, SwipeItem } from 'vant';

const app = createApp();
app.use(Swipe);
app.use(SwipeItem);

页面元素内容，动态加载
:loop="false"关闭循环播放；indicator-color="white"指示器颜色：白色

页面所有的图标元素在groupedIcons中存放，动态计算有几组展示几个轮播卡片，每个卡片从左到右最多排放4个图标

index.vue 复制代码

<template>
  <van-swipe class="icon-swipe" :loop="false" indicator-color="white">
    <van-swipe-item v-for="(iconInfo, index) in groupedIcons" :key="index">
      <div class="icon-info">
        <div v-for="item in iconInfo" :key="item.key" class="icon-item" @click="go2Urls(item)">
          <img :src="importImg(item.key)" />
          <div>{{ item.name }}</div>
        </div>
      </div>
    </van-swipe-item>
  </van-swipe>
</template>

样式

使用传统的display：flex;justify-content: flex-start;无法准确估量不同屏幕padding值，总会有差异。所以采用网格布局的方法，动态适配移动端不同屏幕宽度，并保证页面元素时从左到右顺利排列的。

如果图标内容太长，使用overflow-x: auto允许内容横向滚动

index.scss 复制代码

.icon-swipe {
  background: #ffffff;
  border-radius: 10px;
  align-items: center;
}
.icon-info {
  display: grid;//网格布局
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));//网格有几列，每列多宽（auto-fill模式，自动填充可用空间，尽可能多地创建列，不会压缩内容；minmax(50px, 1fr)最小宽度50px,最大宽度1个列）
  gap: 24px;//网格之间的间隙
  padding: 0 20px;
  height: 96px;
  align-items: center;
  overflow-x: auto;
  .icon-item {
    text-align: center;
    img {
      width: 40px;
      height: 40px;
    }
  }
}

数据处理 groupedIcons动态生成一个二维数组，每组最多4个元素，可以支持无限多个组，每个元素内容在ICONINFO中描述。
slice方法返回一个新数组，包括start不包括end.

每个元素支持定制化开发

index.js 复制代码

//获取图片地址，箭头函数，接收一个参数url，返回一个由new URL()构造的完整URL的.href属性,将相对路径解析为基准路径的绝对路径。
const getFile = url => {
  return new URL(`./images/${url}.png`, import.meta.url).href;
};

//数据元素
const ICONINFO = [
  { key: 'test1', name: 'test1', url: '/test1' },
  { key: 'test2', name: 'test2', url: '/test2' },
  { key: 'test3', name: 'test3', url: '/test3' },
  { key: 'test4', name: 'test4', url: '/test4' },
  { key: 'test5', name: 'test5', url: '/test5' },
  { key: 'test6', name: 'test6', url: '/test6' },
  ...
];

//响应式引用,视图会自动更新
const iconInfo = ref(ICONINFO);

// 动态分组：每 4 个一组
const groupedIcons = computed(() => {
  const groupSize = 4; // 每屏展示 4 个
  const groups = [];
  for (let i = 0; i < tabinfo.value.length; i += groupSize) {
    groups.push(tabinfo.value.slice(i, i + groupSize));
  }
  return groups;
});

const importImg = key => {
  return getFile(key);
};

//路由跳转
const go2Urls = item => {
  $router.push(item.url);
};