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>