caimei-applets-store/components/views/cm-simple-swiper/cm-simple-swiper.vue

<template>
    <view class="simple-swiper">
        <uni-swiper-dot :info="mapList" :current="current" mode="dot" :dotsStyles="dotsStyles">
            <swiper
                class="swiper"
                :style="{ height: swiperHeight + 'rpx' }"
                :indicator-dots="indicatorDots"
                :indicator-color="indicatorColor"
                :indicator-active-color="indicatorActiveColor"
                :autoplay="autoplay"
                :current="current"
                :interval="interval"
                :duration="duration"
                :circular="circular"
                :vertical="vertical"
                :previousMargin="previousMargin"
                :nextMargin="nextMargin"
                :skipHiddenItemLayout="skipHiddenItemLayout"
                :easingFunction="easingFunction"
                @change="onChange"
                @transition="onTransition"
                @animationfinish="onAnimationfinish"
            >
                <swiper-item v-for="(item, index1) in mapList" :key="index1">
                    <view class="swiper__item" :style="layoutStyle">
                        <template v-if="item.length">
                            <view v-for="(data, index2) in item" class="grid" :key="index2">
                                <slot :row="data" name="slide"></slot>
                            </view>
                        </template>
                        <view v-else class="grid"><slot name="slide" :row="item"></slot></view>
                    </view>
                </swiper-item>
            </swiper>
        </uni-swiper-dot>
    </view>
</template>

<script>
import swiperProps from './mixins/swiper'
export default {
    name: 'cm-simple-swiper',
    mixins: [swiperProps],
    props: {
        /* swiper数据 */
        data: {
            type: Array,
            default: () => []
        },
        // 行数
        rows: {
            type: Number,
            default: 1
        },
        // 列数
        columns: {
            type: Number,
            default: 1
        },
        swiperHeight: {
            type: Number,
            default: 350
        },
        gapX: {
            type: Number,
            default: 0
        },
        gapY: {
            type: Number,
            default: 0
        },
        padding: {
            type: String,
            default: '0'
        },
        autoFill: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        // 真正渲染的列表
        mapList() {
            const result = this.formatSwiperList(this.data)
            console.log(result)
            return result
        },
        // 宽
        width() {
            return 100 / this.columns + '%'
        },
        dotsStyles() {
            return {
                width: 6,
                bottom: 8,
                color: 'background: rgba(255, 255, 255, 0.39)',
                backgroundColor: 'background: rgba(255, 255, 255, 0.39)',
                border: '0',
                selectedBackgroundColor: '#FF457B',
                selectedBorder: '#FF457B'
            }
        },
        layoutStyle() {
            return `
                display: grid;
                padding: ${this.padding};
                grid-template-columns: repeat(${this.columns}, 1fr);
                grid-template-rows: repeat(${this.rows}, 1fr);
                grid-column-gap: ${this.gapX}rpx;
                grid-row-gap: ${this.gapX}rpx;
            `
        }
    },
    methods: {
        // 处理轮播图数据列表
        formatSwiperList(list = []) {
            const result = []
            const count = this.rows * this.columns
            // 一屏仅有一个时
            if (count === 1) {
                return list
            }
            let start = 0
            // 一屏多个时
            while (list.length > 0) {
                if (start >= list.length) {
                    break
                }
                const slice = list.slice(start, start + count)
                if (slice.length < count && this.autoFill) {
                    slice.push(...this.fullArray(count - slice.length))
                }
                result.push(slice)
                start += count
            }
            return result
        },
        // 补全
        fullArray(count) {
            return this.data.slice(0, count)
        }
    }
}
</script>

<style lang="scss" scoped>
.grid {
    display: flex;
    justify-content: center;
}
</style>