整个红色区域为可滑动区域，数字1区域为展示区域，数字2为下一个展示模块
<scroll-view class="h_scroll_horizontal" enhanced="ture" bind:touchend="touchEnd" bind:touchstart="touchStart">
<view class="h_od_big">
<swiper class="h_od_swiper" current="{{orderIndex}}">
<block wx:for="{{orderTip}}" wx:key="index">
<swiper-item catchtouchmove="stopTouchMove">
<view class="h_od_swiper_box">
{{item}}
</view>
</swiper-item>
</block>
</swiper>
<view class="h_od_gird_box">
<view class="h_od_gird {{index==0?'h_od_gird_show':''}}" wx:for="{{orderTip2}}" wx:key="index" wx:if="{{index<3}}" style='transform:translate({{index*15}}rpx,{{index*20}}rpx);z-index: {{-index}};height: {{index==0?index+1*228:228-15*index}}rpx;'>{{orderTip[orderIndex+1]}}
</view>
</view>
</view>
</scroll-view>.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
})
},
