当前位置：首页 > uni-app

uniapp轮播菜单

2026-02-06 06:12:56uni-app

uniapp 轮播菜单实现方法

在 uniapp 中实现轮播菜单可以通过 swiper 组件结合自定义样式完成。以下是具体实现步骤和代码示例：

基础轮播菜单实现

使用 swiper 组件创建横向滚动的菜单栏，通过设置 indicator-dots 属性控制是否显示指示点：

uniapp轮播菜单

<template>
  <view>
    <swiper :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000">
      <swiper-item v-for="(item, index) in menuList" :key="index">
        <view class="menu-item">{{ item.name }}</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        { name: '首页' },
        { name: '分类' },
        { name: '发现' },
        { name: '购物车' },
        { name: '我的' }
      ]
    }
  }
}
</script>

<style>
.menu-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
}
</style>

自定义样式优化

为菜单项添加更多样式和交互效果，可以通过 CSS 实现圆角、阴影等视觉效果：

.menu-item {
  margin: 10px;
  padding: 15px 25px;
  border-radius: 20px;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  color: white;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

添加点击事件

为每个菜单项添加点击事件处理函数：

uniapp轮播菜单

<view class="menu-item" @click="handleMenuClick(item)">{{ item.name }}</view>

methods: {
  handleMenuClick(item) {
    uni.showToast({
      title: `点击了${item.name}`,
      icon: 'none'
    })
  }
}

分页显示控制

当菜单项较多时，可以通过计算属性控制每页显示的菜单项数量：

computed: {
  paginatedMenu() {
    const itemsPerPage = 5
    const pages = []
    for (let i = 0; i < this.menuList.length; i += itemsPerPage) {
      pages.push(this.menuList.slice(i, i + itemsPerPage))
    }
    return pages
  }
}

<swiper-item v-for="(page, pageIndex) in paginatedMenu" :key="pageIndex">
  <view class="menu-row">
    <view v-for="(item, index) in page" :key="index" class="menu-item">
      {{ item.name }}
    </view>
  </view>
</swiper-item>

性能优化建议

对于大量菜单项的情况，建议使用 virtual-list 组件替代常规渲染方式：

<virtual-list :size="80" :remain="8" :item="menuList" :item-key="id">
  <template v-slot:item="{ item }">
    <view class="menu-item">{{ item.name }}</view>
  </template>
</virtual-list>