小程序 swiper滑动 层叠滑动效果

整个红色区域为可滑动区域，数字1区域为展示区域，数字2为下一个展示模块

			
				
					
						
							
								{{item}}
							
						
					
				
				
					{{orderTip[orderIndex+1]}}
					
				
			
		

.h_od_swiper {
	/* border: 1rpx solid black; */
	width: 450rpx;
	height: 228rpx;
	background: linear-gradient(180deg, #FFF6E3 0%, #FFE5D9 100%);
	border-radius: 12rpx;
	border: 1rpx solid #E08100;
	z-index: 0 !important;
}

.h_od_swiper_box {
	width: 100%;
	height: 100%;
	padding: 24rpx 20rpx;
	
}
.h_scroll_horizontal {
	/* border: 1rpx solid red; */
	width: 100%;
	margin-bottom: 30rpx;
}

.h_od_big {
	display: flex;
	width: 100%;
	/* border: 1rpx solid #0064FF; */
}

.h_od_gird_box {
	position: relative;
	/* border: 1rpx solid #0064FF; */
	margin-left: 15rpx;
	width: 185rpx;
	height: 228rpx;
	position: relative;
	display: flex;
	flex-direction: columnl;
	box-sizing: border-box;

}

.h_od_gird {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #FFF6E3 0%, #FFE5D9 100%);
	border-radius: 12rpx;
	border: 1rpx solid #E08100;
}

.h_od_gird_show {
	background: linear-gradient(180deg, #FFF6E3 0%, #FFE5D9 100%);
	left: 0rpx;
	position: absolute;
	z-index: 100;

}

data: {
		


		orderTip: ['1', '2', '3', '4', '5', '6'],
		orderTip2: ['1', '2', '3', '4', '5', '6'],
		orderIndex: 0,
		flag: '',
		lastX: '',
		lastY: '',


	},

/**
	*   滑动开始
	*/
	touchStart(e) {
		let that = this
		console.log(e)
		that.data.flag = 0;
		that.data.lastX = e.changedTouches[0].pageX;
		that.data.lastY = e.changedTouches[0].pageY;
	},
	/**
	*   滑动结束
	*/
	touchEnd(e) {
		let that = this
		let { flag, lastX, lastY, orderIndex, orderTip, orderTip2 } = that.data
		if (flag !== 0) {
			return;
		}
		let currentX = e.changedTouches[0].pageX;
		let currentY = e.changedTouches[0].pageY;
		let tx = currentX - lastX;
		let ty = currentY - lastY;
		//左右方向偏移大于上下偏移认为是左右滑动
		if (Math.abs(tx) - Math.abs(ty) > 5) {
			// 向左滑动
			if (tx < 0) {
				// 如果到最右侧
				console.log('向左滑动');
				flag = 1;
				console.log(orderIndex, orderTip.length);
				if (orderIndex >= 0 && orderIndex < orderTip.length - 1) {
					console.log(orderTip2.length);
					orderTip2.pop()
					that.setData({
						orderIndex: orderIndex + 1,
						orderTip2: orderTip2
					})
				}
				// 向右滑动（）
			} else if (tx > 0) {
				// 如果到最左侧
				flag = 2;
				console.log('向右滑动');
				console.log(orderIndex);
				if (orderIndex > 0) {
					orderTip2.push('')
					that.setData({
						orderIndex: orderIndex - 1,
						orderTip2: orderTip2
					})
				}

			}
		}
		//上下方向滑动
		else {
			if (ty < 0) {
				//向上滑动
				flag = 3;
			} else if (ty > 0) {
				//向下滑动
				flag = 4;
			}
		}
		//将当前坐标进行保存以进行下一次计算
		that.data.lastX = currentX;
		that.data.lastY = currentY;

		console.log('停止滑动', e)
		//停止滑动
		that.data.flag = 0;
	},
	/**
	*   swiper Index
	*/
	swipertabb(e) {
		this.setData({
			orderIndex: e.detail.current
		})
	},