uniapp轮播菜单

实现轮播菜单的基本方法

在UniApp中实现轮播菜单通常使用swiper组件，结合自定义样式和逻辑完成。以下是一个基础实现示例：

<template>
  <view>
    <swiper :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000" class="menu-swiper">
      <swiper-item v-for="(page, index) in menuPages" :key="index">
        <view class="menu-page">
          <view v-for="(item, i) in page" :key="i" class="menu-item" @click="handleMenuClick(item)">
            <image :src="item.icon" mode="aspectFit"></image>
            <text>{{item.name}}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        {name: '菜单1', icon: '/static/menu1.png'},
        {name: '菜单2', icon: '/static/menu2.png'},
        // 更多菜单项...
      ],
      itemsPerPage: 8 // 每页显示8个菜单项
    }
  },
  computed: {
    menuPages() {
      const pages = []
      this.menuItems.forEach((item, index) => {
        const pageIndex = Math.floor(index / this.itemsPerPage)
        if (!pages[pageIndex]) {
          pages[pageIndex] = []
        }
        pages[pageIndex].push(item)
      })
      return pages
    }
  },
  methods: {
    handleMenuClick(item) {
      uni.showToast({
        title: `点击了${item.name}`,
        icon: 'none'
      })
      // 实际业务处理逻辑
    }
  }
}
</script>

<style>
.menu-swiper {
  height: 400rpx;
}
.menu-page {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
}
.menu-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}
.menu-item image {
  width: 80rpx;
  height: 80rpx;
}
.menu-item text {
  font-size: 24rpx;
  margin-top: 10rpx;
}
</style>

自定义指示器样式

可以通过自定义样式实现更美观的指示器：

.swiper-indicator {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ccc;
  margin: 0 5px;
}
.indicator-dot.active {
  background-color: #007AFF;
}

响应式布局优化

针对不同屏幕尺寸进行优化：

onLoad() {
  this.calculateItemsPerPage()
  uni.onWindowResize(() => {
    this.calculateItemsPerPage()
  })
},
methods: {
  calculateItemsPerPage() {
    uni.getSystemInfo({
      success: (res) => {
        const screenWidth = res.windowWidth
        // 根据屏幕宽度计算每页显示数量
        this.itemsPerPage = screenWidth > 400 ? 8 : 6
      }
    })
  }
}

性能优化建议

对于大量菜单项的情况，可以使用虚拟列表技术：

<swiper-item v-for="(page, index) in menuPages" :key="index">
  <recycle-list :size="itemsPerPage">
    <view v-for="(item, i) in page" :key="i" class="menu-item">
      <!-- 菜单项内容 -->
    </view>
  </recycle-list>
</swiper-item>

动画效果增强

添加过渡动画提升用户体验：

.menu-item {
  transition: transform 0.3s ease;
}
.menu-item:active {
  transform: scale(0.95);
}

以上实现方法可以根据实际项目需求进行调整和扩展，包括菜单项的布局、交互效果以及性能优化等方面。