uniapp自定义卡片轮播图

 

 1，组件封装

<template>
    <view>

        <!-- 自定义卡片轮播 -->
        <swiper class="swiperBox" :previous-margin="swiper.margin" :next-margin='swiper.margin' :circular="true"
            @change="swiperChange">
            <swiper-item class="swiperItem" v-for="(item,index) in swiper.list" :key="index">
                <view class="swiperWrap" :class="{'active':swiper.index == index}">
                    <view class="swiperPic">
                        <image :src="item.url"></image>
                    </view>
                    <view class="swiperCon">
                        <view class="swiperName">{{item.title}}</view>
                        <view class="swiperPrice">
                            <view class="group">
                                <image src="/static/index/swiperGroup.png" mode="aspectFill"></image>
                            </view>
                            <view class="price">
                                ￥<text>{{item.price}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                swiper: {
                    margin: "150rpx",
                    index: 0,
                    list: [{
                        url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                        title: '谁念西风独自凉',
                        price: '0.01',
                    }, {
                        url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                        title: '沉思往事立残阳',
                        price: '0.02',
                    }, {
                        url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                        title: '沉思往事立残阳',
                        price: '0.03',
                    }]
                },
            }
        },
        components: {

        },
        mounted() {

        },
        methods: {
            //swiper滑动事件
            swiperChange(e) {
                this.swiper.index = e.detail.current;
            },
        }
    }
</script>

<style scoped lang="scss">
    .swiperBox {
        height: 500rpx;
        overflow: hidden;
    }

    .swiperItem {
        border-radius: 20rpx;
        overflow: hidden;
    }

    .swiperWrap {
        transform: scale(0.9);
        transition: transform 0.3s ease-in-out 0s;
    }

    .swiperWrap.active {
        transform: scale(1);
    }

    .swiperPic {
        width: 100%;
        height: 325rpx;
    }

    .swiperPic image {
        width: 100%;
        height: 100%;
    }

    .swiperCon {
        padding: 20rpx;
        background-color: #fff;
    }

    .swiperName {
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
    }

    .swiperPrice {
        width: 160rpx;
        height: 54rpx;
        border-radius: 28rpx;
        border: 2rpx solid $uni-theme;
        overflow: hidden;
        margin: 20rpx auto 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .group {
        width: 60rpx;
        height: 54rpx;
        background: $uni-theme;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .group image {
        width: 28rpx;
        height: 28rpx;
    }

    .price {
        width: 100rpx;
        height: 54rpx;
        font-size: 24rpx;
        color: $uni-theme;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .price text {
        font-size: 32rpx;
    }
</style>

2，组件引用

<template>
    <view>

        <swiperCard></swiperCard>

    </view>
</template>

<script>
    import swiperCard from "@/components/swiperCard/swiperCard"

    export default {
        components: {
            swiperCard
        },
        data() {
            return {
                
            }
        },

    }
</script>