--- # 主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro # 贡献主题：https://github.com/xitu/juejin-markdown-themes theme: juejin highlight: --- ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b8bc4a6273e142088f453d487de599f9~tplv-k3u1fbpfcp-watermark.image) # 小程序-源码实现3D层叠轮播图作者：fengfanv ## Tips： - 此文如果对您有帮助，希望 ```客官``` 您可以施舍个 ```赞``` 或 ```评论```，让更多的人看到。 ## Demo的由来： - 1、小程序里无法使用```swiper.js```插件 - 2、网上搜索关于小程序层叠轮播，但得到的结果达不到想要的效果 ## Demo源码： - demo.wxml ```html {{item.option}} ``` - demo.wxss ```css /*轮播图辅助线，css*/ .line{ width: 100%; height: 420rpx; border: 1rpx solid red; position: fixed; left: 0; top: 434rpx; z-index: 0; } .line view{ width: 213rpx; height: 420rpx; /* border: 1rpx solid red; */ border-left: 1rpx solid red; position: absolute; left: 0; right: 0; margin: 0 auto; top: 0; z-index: 0; } /*层叠轮播选牌，css*/ .selection_cards{ width: 100%; height: 400rpx; position: relative; margin-top: 200px; z-index: 99; } .selection_cards_item{ width: 194rpx;/*188*/ height:350rpx;/*340*/ background:green; background-size: 100%; border-radius: 16rpx; position: absolute; top: 0; color: white; font-size: 100rpx; box-sizing: border-box; border: 4rpx solid black; } ``` - demo.js ```javascript Page({ data: { cardNumber: 7, //牌的数量 indexArr: [-3, -2, -1, 0, 1, 2, 3], //牌的坐标，0就是最中间那张牌 list: [], //用于渲染的列表 listArr: [], //备份初始化后的list数组 isTouch: false, //当前是否为触摸状态 startPageX: 0, //按下触摸时的位置 cardWidth: 0, //当前设备下牌的真实宽度 screenWidth: 0, //当前屏幕的真实宽度 }, onLoad() { let _this = this; _this.init(); }, /*层叠轮播图初始化方法*/ init: function () { let _this = this; wx.getSystemInfo({ success(res) { //获取设备信息成功 let cardWidth = res.screenWidth / 750 * 194; //1、初始化用于渲染的数组 let len = _this.data.cardNumber; let arr = []; for (let i = 0; i < len; i++) { let item = { option: 0, //自定义参数 left: (i * (cardWidth / 2)), scale: (3 - Math.abs(_this.data.indexArr[i])) * 0.4, zIndex: 3 - Math.abs(_this.data.indexArr[i]), style: { left: (i * (cardWidth / 2)), transition: 0, zIndex: 3 - Math.abs(_this.data.indexArr[i]), transform: "scale(" + ((3 - Math.abs(_this.data.indexArr[i])) * 0.4) + ")", opacity: (3 - Math.abs(_this.data.indexArr[i]) != 0) ? 1 : 0 } } item.option = i; arr.push(item); } console.log(arr); _this.setData({ screenWidth: res.screenWidth, cardWidth, list: arr, listArr: arr }) } }) }, /*事件，触摸开始*/ touchstart(e) { this.setData({ startPageX: e.changedTouches[0].pageX, isTouch: true //开始触摸 }); }, /*事件，触摸移动*/ touchmove(e) { let _this = this; let pageX = e.changedTouches[0].pageX; let move = pageX - _this.data.startPageX; //正数，向右滑动；负数，向左滑动 let list = JSON.parse(JSON.stringify(_this.data.list)); let len = list.length; if (move > 0) { //向右滑 for (let i = 0; i < len; i++) { //1、改变每张牌的位置 list[i].style.left = list[i].left + ((move) * 0.52); //2、处理7张牌里，左边牌的样式，不包括中间的牌（坐标：-3,-2,-1） if (_this.data.indexArr[i] < 0) { list[i].style.transform = "scale(" + (list[i].scale + (move * 0.005)) + ")"; list[i].style.zIndex = list[i].zIndex + 1; if (_this.data.indexArr[i] >= -3) { list[i].style.opacity = 1; //把最左边的牌显示 } } else { //3、处理7张牌里，右边牌的样式，包括中间的牌（坐标：0,1,2,3） list[i].style.transform = "scale(" + (list[i].scale - (move * 0.005)) + ")"; list[i].style.zIndex = list[i].zIndex - 1; if (_this.data.indexArr[i] >= 2) { list[i].style.opacity = 0; //把最右边的牌关闭 } } } //检查，向右滑动时，滑动的距离，可不可以，切换牌的位置 //原理，改变option（自定义参数）的位置 if (list[2].style.left >= list[3].left) { //console.log('可以切换牌的位置'); let newList = []; for (let i = 0; i < len; i++) { let index = i; //当前牌，将要变成哪一个牌的位置 if (i + 1 != len) { index = i + 1; } else { //最后的那张牌，到，第一张牌的位置 index = 0; } let currentOption = list[i].option; // console.log('currentOption',currentOption); // console.log('list[i].option',list[i].option); let item = _this.data.listArr[index]; item.option = currentOption; newList[index] = item; } list = newList; _this.setData({ startPageX: pageX }); } _this.setData({ list }) } else { //向左滑 for (let i = 0; i < len; i++) { //1、改变每张牌的位置 list[i].style.left = list[i].left + ((move) * 0.52); //2、处理7张牌里，左边牌的样式，包括中间的牌（坐标：-3,-2,-1,0） if (_this.data.indexArr[i] <= 0) { list[i].style.transform = "scale(" + (list[i].scale - Math.abs(move * 0.005)) + ")"; list[i].style.zIndex = list[i].zIndex - 1; if (_this.data.indexArr[i] <= -2) { list[i].style.opacity = 0; //最左边的牌消失 } } else { //3、处理7张牌里，右边牌的样式，不包括中间的牌（坐标：1,2,3） list[i].style.transform = "scale(" + (list[i].scale + Math.abs(move * 0.005)) + ")"; list[i].style.zIndex = list[i].zIndex + 1; if (_this.data.indexArr[i] >= 2) { list[i].style.opacity = 1; //最右边的牌显示 } } } //检查，向左滑动时，滑动的距离，可不可以，切换牌的位置 //原理，改变option（自定义参数）的位置 if (list[3].style.left <= list[2].left) { //console.log('可以切换牌的位置'); let newList = []; for (let i = 0; i < len; i++) { let index = i; //当前牌，将要变成哪一个牌的位置 if (i == 0) { index = len - 1; } else { //最后一个元素到第一个元素的位置 index = i - 1; } let currentOption = list[i].option; // console.log('currentOption',currentOption); // console.log('list[i].option',list[i].option); let item = _this.data.listArr[index]; item.option = currentOption; newList[index] = item; } list = newList; _this.setData({ startPageX: pageX }); } _this.setData({ list }) } }, /*事件，触摸结束*/ touchend(e) { let _this = this; let list = JSON.parse(JSON.stringify(_this.data.list)); let len = list.length; _this.setData({ isTouch: false //关闭触摸 }); //检测可不可以切换牌的位置 if (list[2].style.left >= list[3].left || list[3].style.left <= list[2].left) { //console.log('可以切换牌的位置'); } else { //移动的距离不够，不用切换牌的位置，恢复牌的位置 for (let i = 0; i < len; i++) { list[i].style.left = list[i].left; list[i].style.zIndex = list[i].zIndex; list[i].style.transform = "scale(" + list[i].scale + ")"; list[i].style.opacity = (3 - Math.abs(_this.data.indexArr[i]) != 0) ? 1 : 0 } _this.setData({ list }) } } }) ```