uniapp开发小程序，实现堆叠卡片轮播图

一、实现堆叠卡片轮播图:

需求:

实现堆叠轮播图效果
堆叠到后面的图片有虚化效果
可以在堆叠图片上写文字或叠加图片等效果
可以手动滑动，也可以定时自动轮播

在这里插入图片描述

二、代码实现：

1.封装一个组件`myswiper.vue`

<!-- 折叠轮播图 组件-->
<template><view  class="swpbig"><view class="swiperPanel" ref="swiperPanel" @touchstart="startMove" @touchend="endMove"><view class="swiperItem" v-for="(item, index) in swiperList" :key="index" :style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}"><view class="children"><view class="pic"><image class="pici" :src="item.url"></image><image  class="banner_signal" src="../../static/banner_signal.png" mode=""></image><view class="swpnew">标题</view></view></view></view></view></view>
</template><script>var timer;export default {props: {swiperList: {type: Array,default: ()=>[{type: 'Array',url: '../../static/ceshi1.png',}, {type: 'Array',url: '../../static/ceshi2.png',}, {type: 'Array',url: '../../static/ceshi3.png',}]}},data() {return {slideNote: {x: 0,y: 0},screenWidth: 0,itemStyle: []};},created() {var macInfo = uni.getSystemInfoSync();this.screenWidth = macInfo.screenWidth;// 计算swiper样式this.swiperList.forEach((item, index) => {this.itemStyle.push(this.getStyle(index))})timer = setInterval(()=>{this.rightSlider();},3000)},methods: {rightSlider(){var newList = JSON.parse(JSON.stringify(this.itemStyle));var last = [newList.pop()]newList = last.concat(newList)this.itemStyle = newList;},getStyle(e) {if (e > this.swiperList.length / 2) {var right = this.swiperList.length - ereturn {transform: 'scale(' + (1 - right / 10) + ') translate(-' + (right * 9) + '%,0px)',zIndex: 9999 - right,opacity: 0.5 / right}} else {return {transform: 'scale(' + (1 - e / 10) + ') translate(' + (e * 9) + '%,0px)',zIndex: 9999 - e,opacity: 0.5 / e}}},startMove(e) {clearInterval(timer);this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;},endMove(e) {timer = setInterval(()=>{this.rightSlider();},3000)var newList = JSON.parse(JSON.stringify(this.itemStyle));if ((e.changedTouches[0].pageX - this.slideNote.x) < 0) {// 向左滑动var last = [newList.pop()]newList = last.concat(newList)} else {// 向右滑动newList.push(newList[0])newList.splice(0, 1)}this.itemStyle = newList}}}
</script><style lang="scss">.swpbig{overflow: hidden;}.swiperPanel {margin-top: 200upx;height: 680upx;width: 686upx;overflow: hidden;position: relative;margin-left:80upx;.swiperItem {height: 100%;width: 100%;position: absolute;top: 0;left: 0upx;transition: all .5s;.children {// height: 100%;width: 570upx;margin: 2upx 160upx 2upx 0;position: relative;.pic {position: relative;height: 645rpx;width: 560rpx;border-radius: 10upx;}.pici{position: absolute;height: 645rpx;width: 560rpx;border-radius: 10upx;	}.banner_signal{position: absolute;height: 645rpx;width: 560rpx;top: 0;}.swpnew{position: absolute;height: 63rpx;font-size: 45rpx;font-weight: bold;color: #FFF;line-height: 53rpx;right: 28rpx;margin-top: 12rpx;letter-spacing: 5rpx;}}}}
</style>

2.在需要的页面引用


<template><view class=""><mySwiper :swiperList='swiperList'></mySwiper ></view>
</template><script>// 组件导入import mySwiper from '../../components/myswiper.vue'export default {// 组件注册components: {blackSwiper},data() {return {//组件数据处理：swiperList: [{type: 'Array',url: "https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280",}, {type: 'Array',url: 'https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000',}, {type: 'Array',url: 'https://inews.gtimg.com/om_bt/OuevRi3lDJoCccAqM17UARGbNlk9CRf3pGPv7He7zA8yYAA/1000',}]};},}
</script>