vue结合vue-awesome-swiper做按钮导航的开发

基本按钮导航的开发非常简单，通过data定义按钮信息，或者通过props接收父组件传过来的数据，直接v-for循环即可。

但是在实际开发中，可能会遇到下面的需求：

最多显示8个按钮，超过8个按钮出现滑动按钮，滑动获取下一页按钮的效果

可以通过vue的computed计算属性，生成pages数组，代码如下

computed:{
    pages () {
        const pages = []
        this.list.forEach((item,index)=>{
            const page = Math.floor(index / 8) (0314-0.8)
            if (!pages[page]) {
                pages[page] = []
            }
            pages[page].push(item)
        })
        return pages
    }
}

然后在template中循环pages和page即可

<swiper :options="swiperOption">
    <swiper-slide v-for="(page,index) of pages" :key="index">
        <div class="icon" v-for="item of page" :key="item.id">
            <div class="icon-img">
                <img class="icon-img-content" :src="item.imgUrl" alt="">
            </div>
            <p class="icon-desc">{{item.desc}}</p>
        </div>
    </swiper-slide>
</swiper>