轮播图功能，每屏包含几个tab类似饿了么首页

最新推荐文章于 2025-03-25 17:16:27 发布

原创最新推荐文章于 2025-03-25 17:16:27 发布 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

13 篇文章

订阅专栏

微信小程序

13 篇文章

订阅专栏

本文详细介绍了一种在小程序中实现轮播图组件的方法，特别关注于如何通过计算属性动态生成最多三页的轮播图，每页包含五个分类项，并在分类数量不足时展示‘更多’选项。

首先：（先看看饿了么的首页效果）

再看看：（本文的效果）

想体验完整小程序项目的可以微信扫码体验：

项目需求：

1、最多三页轮播；

2、最后的“更多”字样会跳转到包含全部分类的单页

3、“更多”这个tab始终保留，超过14个的后面不显示；

4、单页滚动，每页包含5个tab小类。

实现步骤：

（一） html代码如下：

<template>
    <swiper class="swiper-box-new"
        indicator-dots=true
        duration="500"
        indicator-active-color="#5BB53C">
        <block v-for="(page, index) in pages" :key="index">
            <swiper-item class="swiper-item">
                <div class="item-box">
                    <div class="item" v-for="(item, indexItem) in page" :key="indexItem">
                        <div class="item-flex" @tap="toProduct(item.categoryId)">
                            <image :src="item.iconUrl"/>
                            <p>{{item.name}}</p>
                        </div>
                    </div>
                    <div class="item" v-if="page.length != 5">
                        <div class="item-flex" @tap="getMore">
                            <image src="http://common.static.sangeayi.cn/shop_wx/images/home_icon_more@2x.png"/>
                            <p>更多</p>
                        </div>
                    </div>
                </div>
            </swiper-item>
            
        </block>
        <block v-if="showIcon === 5 || showIcon === 10">
            <swiper-item class="swiper-item">
                <div class="item-box">
                    <div class="item">
                        <div class="item-flex" @tap="getMore">
                            <image src="http://common.static.sangeayi.cn/shop_wx/images/home_icon_more@2x.png"/>
                            <p>更多</p>
                        </div>
                    </div>
                </div>
            </swiper-item>
        </block>
    </swiper>
</template>

（二） js代码如下：

<script>
export default {
  props: ['list'],
  computed: {
    pages () {
      const pages = []
      this.list.forEach((item, index) => {
        const page = Math.floor(index / 5)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      if (pages.length > 3) {
        let arr = pages.slice(0, 3)
        arr[2].pop()
        return arr
      }
      return pages
    },
    showIcon () {
      return this.list.length
    }
  },
  methods: {
    getMore () {
      wx.navigateTo({
        url: '/pages/serviceCategory/main'
      })
    },
    toProduct (id) {
      wx.navigateTo({
        url: '/pages/productlist/main?categoryId=' + id
      })
    }
  }
}
</script>

（三）讲解：

1、组件化，我们肯定会把这个部分当成一个组件抽离出来处理；

2、从父组件得到list数组；

3、这个list数组并不能直接拿来用，因为我们需要分页做轮播；

4、本文最核心的点是在计算属性中的pages值的获取，真正需要实现本文效果的小伙伴希望好好研究下pages里面的逻辑；

5、说说pages里面的具体实现，以便大家理解，pages里面最多装有三个数组，当单个数组长度小于5时，默认显示“更多”这个tab，此时这个数组肯定是最后一个，因为5个一组，只有最后的数组的长度有可能小于5

（四）最后把最基础的css代码贴出，方便大家参考：

<style scoped lang="stylus">
.swiper-box-new
    width 100%
    height 235rpx
    background #fff
    .swiper-item
        width 750rpx
        height 235rpx
        .item-box
            width 100%
            height 100%
            .item
                display inline-block
                width 20%
                height 235rpx
                .item-flex
                    width 100%
                    height 100%
                    display flex
                    flex-direction column
                    justify-content flex-end
                    align-items center
                    image
                        width 90rpx
                        height 90rpx
                    p
                        height 33rpx
                        line-height 33rpx
                        font-size 24rpx
                        color #666666
                        margin 15rpx 0 68rpx
</style>

总结：

其实本文的目的还是为了实现轮播图效果，只是每张图我们需要做点处理，并不是简单的一张图片，理解计算属性中的pages的由来，那么想要实现本文的效果就简单多了。最后，当然希望这篇文章可以帮助到大家，助人为快乐之本！