微信小程序开发——自定义堆叠图

先看效果图

点击第一张图片实现折叠，再次点击实现展开

思路

图片容器绑定点击事件获取当前图片索引，触发onTap函数，根据索引判断当前点击的图片是否为第一张，并根据当前的折叠状态来更新每张图片的位置，注意图片向上移动的距离与索引成正相关，而且始终是索引越小层级越大。

代码

/* WXSS */
.bigFoldBox{
	width: 100vw;
	border-top: calc(1 / 360 * 750rpx) black solid;
}
.image{
	width: calc(360 / 360 * 750rpx);
	height: calc(125 / 360 * 750rpx);
}
.foldBox {
    position: relative;
    transform: translateY(var(--distance));
    z-index: var(--z-index);
    transition: transform 0.5s ease;
}

// JS
data: {
        images0: [{src: "https://i0.hdslb.com/bfs/new_dyn/f751c91ef0cdbe8c42bf9c3e088b5d46402122872.jpg@!web-comment-note.avif"},
        {src: "https://i0.hdslb.com/bfs/new_dyn/f751c91ef0cdbe8c42bf9c3e088b5d46402122872.jpg@!web-comment-note.avif"},
        {src: "https://i0.hdslb.com/bfs/new_dyn/f751c91ef0cdbe8c42bf9c3e088b5d46402122872.jpg@!web-comment-note.avif"},
        {src: "https://i0.hdslb.com/bfs/new_dyn/f751c91ef0cdbe8c42bf9c3e088b5d46402122872.jpg@!web-comment-note.avif"},
        {src: "https://i0.hdslb.com/bfs/new_dyn/f751c91ef0cdbe8c42bf9c3e088b5d46402122872.jpg@!web-comment-note.avif"}
        ],
        isFold: [],
        zIndex: [], 
        isFolded: true
},
// 点击图片获取索引
onTap(e) {
    let index = e.currentTarget.dataset.index;
    if (index === 0) {
        let newIsFold = this.data.isFolded ? 
        this.data.isFold.map((value, i) => 0) : 
        this.data.isFold.map((value, i) => -i * 100);
        this.setData({ 
            isFold: newIsFold,
            // zIndex: newZIndex, // 不需要更改层级状态
            isFolded: !this.data.isFolded,  // 更新折叠状态
        });
    }
}
onLoad: function() {
    // 在页面加载时，根据 images0 数组的长度设置 isFold 和 zIndex 数组
    let isFold = new Array(this.data.images1.length).fill(0).map((v, i) => -i * 105);
    let zIndex = new Array(this.data.images1.length).fill(0).map((v, i) =>  this.data.images1.length - i);
    this.setData({ isFold: isFold, zIndex: zIndex });
},