子组件接收数据、分页显示

一、子组件中接收LIst数据并使用

• 接收List数据

export default {
    name:"HomeIcons",
    props: {
        list: Array
    },

• 直接使用接收到的数据

<div class="icons">
        <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' />
                    div>
                    <p class="icon-desc">{{item.desc}}p>
                div>
            swiper-slide>
        swiper>
    div>

二、分页

• 如果index大于8，则分页显示

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