首先：（先看看餓了麼的首頁效果）

再看看：（本文的效果）

專案需求：

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/
 
[email protected]"/>
                            <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/
 
[email protected]"/>
                            <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的由來，那麼想要實現本文的效果就簡單多了。最後，當然希望這篇文章可以幫助到大家，助人為快樂之本！