效果图

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>