赞
踩
首先看下最终的效果,三张卡片堆叠式swiper,居中的为展示,左右两边为前一个和后一个,如果是第一长,或者最后一张,对应的前后无阴影堆叠
一共渲染出4个卡片,然后根据显示位置设置zIndex,scale,left等属性,监听用户的滑动行为,对4个卡片的位置进行调整,然后只在当前最中间的卡片展示数据
代码如下:
wxml:
<view class="info-card">
<view class="pagination-prompt">
{{ currentGuestIndex }} / {{ totalGuests }}
</view>
<view class="tower-swiper" style="--cardHeight:{{cardHeight}}" bindtouchstart="towerStart" bindtouchend="towerEnd">
<view class="tower-item {{(item.zIndex == 2 && currentGuestIndex == 1) || (item.zIndex == 3 && currentGuestIndex == dataList.length) ? 'none' : ''}}" wx:for="{{swiperList}}" wx:key="id" style="--index:{{item.zIndex}};--left:{{item.left}};--scale:{{item.scale}};--color:{{item.bgColor}}">
<view class="swiper-item">
<view style="text-align: center;margin-top: 200px;" wx:if="{{item.zIndex == 4}}">
数据展示ID:{{ dataList[currentGuestIndex - 1].id }}
</view>
</view>
</view>
</view>
</view>
less
.info-card { width: 100%; height: 100%; padding: 20rpx 0; .pagination-prompt { height: 30rpx; line-height: 30rpx; width: 160rpx; text-align: center; font-size: 20rpx; background-color: #d6d6d6; border-radius: 40rpx; margin: 0 auto 20rpx; } .tower-swiper { width: 100%; height: calc(var(--cardHeight) * 1px); overflow: hidden; position: relative; .tower-item { position: absolute; width: 100%; height: 110%; bottom: 0; margin: auto; transition: all 0.2s ease-in 0s; opacity: 1; border-radius: 30rpx; top: 0; left: calc(var(--left) * 1px); transform: scale(var(--scale)); background-color: var(--color); z-index: var(--index); overflow: hidden; &.none { opacity: 0; } .swiper-item { width: 100%; height: 100%; } } } }
js
const app = getApp() Component({ properties: { dataList: { type: Object, value: [{ id: 0}, { id: 1}, { id: 2}, { id: 3}, { id: 4}, { id: 5}, { id: 6}] } }, data: { totalGuests: 1, currentGuestIndex: 1, swiperList: [], }, lifetimes: { attached: function () { this.setData({ cardHeight: app.globalData.bodyHeight - 50, clientWidth: wx.getSystemInfoSync().windowWidth, currentGuestIndex: 1, totalGuests: this.data.dataList.length }) this.towerSwiper('swiperList') }, }, methods: { towerSwiper(name) { const clientWidth = this.data.clientWidth const list = [{ id:1, zIndex: 1, left: 0, scale: .8, bgColor: '#acacac', showData: false }, { id:2, zIndex: 2, left: parseInt(-4.5 * clientWidth / 100), scale: .86, bgColor: '#acacac', showData: false }, { id:3, zIndex: 4, left: 0, scale: .9, bgColor: 'yellow', showData: true }, { id:4, zIndex: 3, left: parseInt(4.5 * clientWidth / 100), scale: .86, bgColor: '#acacac', showData: false }] this.setData({ swiperList: list }) }, // towerSwiper触摸开始 towerStart(e) { this.setData({ towerStart: e.touches[0].pageX }) }, // towerSwiper计算滚动 towerEnd(e) { console.log(e.changedTouches[0].pageX - this.data.towerStart); const valueTouch = Math.abs(e.changedTouches[0].pageX - this.data.towerStart) > 50 ? true : false if(!valueTouch) return false const direction = e.changedTouches[0].pageX - this.data.towerStart > 0 ? 'right' : 'left' const list = this.data.swiperList const clientWidth = this.data.clientWidth if (direction == 'right') { if(this.data.currentGuestIndex - 1 > 0) { const preDataIndex = this.data.currentGuestIndex - 1 const newList = list.map((item, index) => { switch(item.zIndex) { case 1: item.left = parseInt(-4.5 * clientWidth / 100) item.zIndex = 2 item.scale = .86 break; case 2: item.left = 0 item.zIndex = 4 item.scale = .9 item.showData = true item.bgColor = 'yellow' break; case 3: item.left = 0 item.zIndex = 1 item.scale = .8 break; case 4: item.left = parseInt(4.5 * clientWidth / 100) item.zIndex = 3 item.scale = .86 item.showData = false item.bgColor = '#acacac' break; } return item }) this.setData({ swiperList: newList, currentGuestIndex: preDataIndex }) } } else { if(this.data.currentGuestIndex + 1 <= this.data.dataList.length) { const nextDataIndex = this.data.currentGuestIndex + 1 const newList = list.map((item, index) => { switch(item.zIndex) { case 1: item.left = parseInt(4.5 * clientWidth / 100) item.zIndex = 3 item.scale = .86 break; case 2: item.left = 0 item.zIndex = 1 item.scale = .8 break; case 3: item.left = 0 item.zIndex = 4 item.scale = .9 item.showData = true item.bgColor = 'yellow' break; case 4: item.left = parseInt(-4.5 * clientWidth / 100) item.zIndex = 2 item.scale = .86 item.showData = false item.bgColor = '#acacac' break; } return item }) this.setData({ swiperList: newList, currentGuestIndex: nextDataIndex }) } } } } })
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。