swiper轮播,根据数据分页展示(一页轮播展示多少内容)

韩召华

已于 2023-04-13 12:18:08 修改

阅读量421

点赞数

分类专栏： javaScript vue 文章标签：前端 vue.js Powered by 金山文档

于 2023-03-02 14:17:35 首次发布

本文链接：https://blog.csdn.net/qq_43787947/article/details/129299920

版权

vue 同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

javaScript

16 篇文章 0 订阅

订阅专栏

<template>
    <view class="home">
        <swiper style="height: 100%; width:100%;" :interval="3000" autoplay>
            <swiper-item class="swiper-item fl" v-for="(v, i) in dataList" :key="i" :index="i">
                <div class="home-item" v-for="(item, index) in v">
                    <div class="home-item-images">
                        <image :src="item.cookPhoto" style="height: 100%; width: 100%;">
                    </div>
                    <div class="home-item-nameBody">
                        <p style="width: 100%;">{{ item.cookDish }}</p>
                        <p style="width: 100%;">{{ item.cookName }}</p>
                        <p style="width: 100%;">{{ item.cookGrade }}</p>
                    </div>
                </div>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                data: []
            }
        },
        mounted() {},
        methods: {},
        computed: {
          dataList() {
            let arr = Array.apply(null, {length: parseInt(this.data.length / 3 + 1)}).map(() => ([]))
            this.data.forEach((v, i) => {
              arr[parseInt(i / 3)].push(v);
            })
                arr = arr.filter(item => item.length > 0)
            if (arr[0] && !arr[0].length) arr = [];
            return arr;
          }
        },
    }
</script>