uni-app实现左右滑动菜单，模拟小米手机桌面菜单应用

<!-- 左右滑动，模拟小米手机桌面菜单应用 -->
<uni-swiper-dot 
  class="uni-swiper-dot" 
  mode="dot" 
  :info="[...Array(Math.ceil(navList.length/9))]"
  :current="current" 
  :dots-styles="{ 
    selectedBackgroundColor: '#bbb',//当前页dot背景色
    backgroundColor: '#eee',//非当前页dot背景色
    width:8, //dot宽度
    height:8,//dot高度
    selectedBorder:'none',//当前页dot边框线
    border:'none',//非当前页dot边框线
    bottom:0,//dot距离底部像素距离
  }"
  >
  <swiper @change="e =>current= e.detail.current">
    <swiper-item class="btns" v-for="(item, index) in Math.ceil(navList.length/9)" :key="index">
      <view class="btn" v-for="(a,i) in navList.slice((index)*9,(index+1)*9)" :key="i" @click="go(a)">
        <view class="icon" :style="{backgroundColor:`${a.bgColor}`}">
          <uni-icons :type="a.icon|| 'compose'" size="40" color='white'></uni-icons>
        </view>
        <h1>{{ a.label }}</h1>
      </view>
    </swiper-item>
  </swiper>
</uni-swiper-dot>

current: 0, //swiper的当前显示页面索引
navList: [
  {
    icon: "compose",
    bgColor: '#409EFF',
    label: "菜单名称",
    path: "路由",
  },
  {
    icon: "calendar",
    bgColor: '#67C23A',
    label: "菜单名称",
    path: "路由",
  },
  {
    icon: "personadd-filled",
    bgColor: '#67C23A',
    label: "菜单名称",
    path: "路由",
  },
  {
    icon: "shop-filled",
    bgColor: '#67C23A',
    label: "菜单名称",
    path: "路由",
  },
  {
    icon: "shop-filled",
    bgColor: '#67C23A',
    label: "菜单名称",
    path: "路由",
  },
  {
    icon: "wallet",
    bgColor: '#E6A23C',
    label: "菜单名称",
    path: "路由",
  },
  {
    icon: "wallet",
    bgColor: '#F56C6C',
    label: "菜单名称",
    path: "路由",
  },
  {
    icon: "staff-filled",
    bgColor: '#E6A23C',
    label: "菜单名称",
    path: "路由",
  },
  {
    icon: "list",
    bgColor: '#E6A23C',
    label: "菜单名称",
    path: "路由",
  },
  {
    icon: "list",
    bgColor: '#E6A23C',
    label: "菜单名称",
    path: "路由",
  },
  {
    icon: "gear",
    bgColor: 'gray',
    label: "菜单名称",
    path: "路由",
  },
],

go(d) {
  switch (d.path) {
    case '路由':
    //做爱做的事
    default:
    //交配交的朋友
  }
},