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

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

需求:

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

二、代码实现：

1.封装一个组件myswiper.vue

标题 var timer;expindex.php/tags-1038.html" >ort 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)  
2.在需要的页面引用
 
// 组件导入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',}]};},}
 
完成~