uniapp实现菜单栏的轮播效果

uniapp实现菜单栏的轮播效果
效果图：

菜单栏可以切换
目前效果：

 data() {
    return {
      swipers: "../../static/swiper.jpg",
      navs: [
        {
          icon: "../../static/yz.png",
          tit: "基金",
          path: "/pages/goods/goods",
        },
        {
          icon: "iconfont icon-ziyuan",
          tit: "会计职称",
          path: "/pages/goods/goods",
        },
        {
          icon: "iconfont icon-ziyuan",
          tit: "注册会计师",
          path: "/pages/goods/goods",
        },
        {
          icon: "iconfont icon-ziyuan",
          tit: "经济师",
          path: "/pages/goods/goods",
        },
        {
          icon: "iconfont icon-ziyuan",
          tit: "注册建造师",
          path: "/pages/goods/goods",
        },
        {
          icon: "iconfont icon-ziyuan",
          tit: "银行",
          path: "/pages/goods/goods",
        },
        {
          icon: "iconfont icon-ziyuan",
          tit: "税务师",
          path: "/pages/goods/goods",
        },
        {
          icon: "iconfont icon-ziyuan",
          tit: "管理会计",
          path: "/pages/goods/goods",
        },
        {
          icon: "iconfont icon-ziyuan",
          tit: "证券",
          path: "/pages/Login/Login",
        },
        {
          icon: "iconfont icon-ziyuan",
          tit: "消防工程师",
          path: "/pages/goods/goods",
        },
      ],
    };
  },

 
    <scroll-view scroll-x="true" class="sw">
      <view class="nav">
        <view
          class="nav_item"
          v-for="(item, index) in navs"
          :key="index"
          @click="navItemClick(item.path)"
        >
          
          <image class="pic" :class="item.icon">image>
          <view class="tit">{{ item.tit }}view>
        view>
      view>
    scroll-view>

/* 导航轮播菜单区域 */
.nav {
  width: 100%;
  height: 220px;
  /* background: red; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* align-items: center; */
}
.nav .nav_item {
  width: 15%;
  height: 100px;
  /* border: 1px solid red; */
  margin: 5px;
}
.nav .pic {
  height: 60px;
  width: 60px;
  background: pink;
  border-radius: 50%;
}
.nav .tit {
  font-size: 12px;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

用uniapp的swiper组件，将数据改为二维数组，十个为一组，然后将二维数组渲染到swiper中去