微信小程式--層疊輪播圖
阿新 • • 發佈：2020-12-27
效果展示
Demo程式碼
wxml
<view class="selection_cards" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"> <view class="selection_cards_item" wx:for="{{list}}" wx:key="index" style="left:{{item.style.left}}px; z-index:{{item.style.zIndex}};transform:{{item.style.transform}};opacity:{{item.style.opacity}};transition:{{!isTouch?'0.1s':0}};background-image: url({{item.backimage}});"> </view> </view>
wxss
/*層疊輪播選牌，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-size: 100%; /* overflow: hidden; */ border-radius: 16rpx; position: absolute; top: 0; color: white; font-size: 100rpx; box-sizing: border-box; }
js
Page({ data: { cardNumber: 7, indexArr: [-3, -2, -1, 0, 1, 2, 3], list: [], listArr: [], startPageX: 0, cardWidth: 0, screenWidth: 0, isTouch: false, }, onLoad() { let _this = this; _this.init(); }, /*層疊輪播圖初始化*/ init: function () { let _this = this; wx.getSystemInfo({ success(res) { //獲取螢幕的寬成功 let arr = []; let len = _this.data.cardNumber; let cardWidth = res.screenWidth / 750 * 194; 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 }, backimage:"", } item.option = i; arr.push(item); } arr[0].backimage="https://ww2.sinaimg.cn/bmiddle/005SWChdly1g5q9gkj0nhj30u01rc167.jpg" arr[1].backimage="https://ww3.sinaimg.cn/bmiddle/005SWChdly1g5q9gk2lrjj30u01rcna4.jpg" arr[2].backimage="https://ww3.sinaimg.cn/bmiddle/005SWChdly1g5q9gjq3dij30u01rc14p.jpg" arr[3].backimage="https://ww2.sinaimg.cn/bmiddle/005SWChdly1g5q9ginahaj30u01rc49y.jpg" arr[4].backimage="https://ww4.sinaimg.cn/bmiddle/005SWChdly1g5q9gi6alkj30u01rc14q.jpg" arr[5].backimage="https://ww3.sinaimg.cn/bmiddle/005SWChdly1g5q9gho9hzj30u01rcalv.jpg" arr[6].backimage="https://ww3.sinaimg.cn/bmiddle/005SWChdly1g5q9ghakxfj30u01rcds3.jpg" console.log(arr); _this.setData({ screenWidth: res.screenWidth, cardWidth, list: arr, listArr: arr }) } }) }, /*觸控開始*/ touchstart(e) { //console.log(e.changedTouches[0].pageX); 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; //console.log(move); if (move > 0) { //向右滑 for (let i = 0; i < len; i++) { list[i].style.left = list[i].left + ((move) * 0.52); 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 { 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; } } } //檢查是否，向右 if (list[2].style.left >= list[3].left) { let newArr = []; for (let i = 0; i < len; i++) { let index = i; //當前將要變成哪一個座標元素的位置 if (i + 1 != len) { index = i + 1; } else { //最後一個元素到第一個元素的位置 index = 0; } let current_option = list[i].option; // console.log('current_option',current_option); // console.log('list[i].option',list[i].option); let item = _this.data.listArr[index]; item.option = current_option; item.backimage=list[i].backimage newArr[index] = item; } // console.log('old', list); // console.log('new', newArr); list = newArr; _this.setData({ startPageX: pageX }); } _this.setData({ list }) } else { //向左滑 for (let i = 0; i < len; i++) { list[i].style.left = list[i].left + ((move) * 0.52); 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 { 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; } } } //檢查，向左 if (list[3].style.left <= list[2].left) { let newArr = []; for (let i = 0; i < len; i++) { let index = i; if (i == 0) { index = len - 1; } else { index = i - 1; } let current_option = list[i].option; // console.log('current_option',current_option); // console.log('list[i].option',list[i].option); let item = _this.data.listArr[index]; item.option = current_option; item.backimage=list[i].backimage newArr[index] = item; } // console.log('old', list); // console.log('new', newArr); list = newArr; _this.setData({ startPageX: pageX }); } _this.setData({ list }) } }, /*觸控結束*/ touchend(e) { console.log('觸控結束'); 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 }) } } })