177 lines
5.0 KiB
Plaintext
177 lines
5.0 KiB
Plaintext
<!--packageA/member/coupon_v2/test.wxml-->
|
|
<view style="overflow-x:hidden;">
|
|
<view style="display:flex;"
|
|
class="ceil"
|
|
bindtouchstart="{{test.touchStart}}"
|
|
bindtouchmove="{{test.touchmove}}"
|
|
bindtouchend="{{test.touchEnd}}"
|
|
change:prevBox="{{test.closePrevBox}}"
|
|
prevBox="{{prevBox}}"
|
|
>
|
|
<slot></slot>
|
|
<view class="right-ceil" style="width:{{rightWidth}}px" ><slot name="right"></slot></view>
|
|
<view class="left-ceil" style="width:{{leftWidth}}px" ><slot name="left"></slot></view>
|
|
</view>
|
|
</view>
|
|
|
|
{{test.rightWidthObserver(rightWidth)}}
|
|
{{test.leftWidthObserver(leftWidth)}}
|
|
|
|
<wxs module="test">
|
|
var rightWidth = 0;
|
|
var leftWidth = 0;
|
|
var direction=0;
|
|
var time=0;
|
|
function rightWidthObserver(w){
|
|
rightWidth = -w;
|
|
console.log("rightWidthObserver",w);
|
|
}
|
|
function leftWidthObserver(w){
|
|
leftWidth = w;
|
|
}
|
|
|
|
// 拖动中时的事件
|
|
function lwmove(event, ins) {
|
|
|
|
//组件实例
|
|
var node = ins.selectComponent(".ceil");
|
|
|
|
console.log("rightWidthObserver",rightWidth);
|
|
// 获取拖动点的坐标数据
|
|
var touch = event.touches[0] || event.changedTouches[0]
|
|
//拿出拖动开始时存储的数据
|
|
var moveE = ins.getState();
|
|
|
|
direction = (touch.pageX - moveE.pageX );
|
|
moveE.pageX = touch.pageX;
|
|
console.log("向左还是向右",direction);
|
|
//计算拖动点与拖动开始时的触发点之间的横坐标之差
|
|
var gap = touch.pageX - moveE.startX + moveE.rX;
|
|
|
|
//获取左滑的距离(拖动中不存储这个数据,而是拖动结束来存储这个数据)
|
|
var left = moveE.rX;
|
|
|
|
//为向左滑动做处理,开始设置左滑的距离
|
|
if(gap>=leftWidth) gap = leftWidth;
|
|
if(gap<=rightWidth) gap = rightWidth;
|
|
// 设置组件向左滑的距离
|
|
node.setStyle({
|
|
"transform": "translateX(" + (gap ) + "px) rotate(0deg)"
|
|
})
|
|
// if (gap < 0) {
|
|
// // 设置组件向左滑的距离
|
|
// node.setStyle({
|
|
// "transform": "translateX(" + (gap + left) + "px)"
|
|
// })
|
|
// }
|
|
|
|
//console.log("拖动中", gap,left,(gap + left));
|
|
|
|
}
|
|
|
|
// 拖动结束时的事件
|
|
function lwend(event, ins) {
|
|
console.log("拖动结束");
|
|
//组件实例
|
|
|
|
var node = ins.selectComponent(".ceil");
|
|
|
|
|
|
// 获取离开点的坐标数据
|
|
var touch = event.touches[0] || event.changedTouches[0]
|
|
//拿出拖动开始时存储的数据
|
|
var moveE = ins.getState();
|
|
var x = touch.pageX;
|
|
|
|
//计算拖动点与拖动开始时的触发点之间的横坐标之差
|
|
var gap = x - moveE.startX+moveE.rX;
|
|
if(Math.abs(moveE.startY-touch.pageY) > Math.abs(gap) && Math.abs(gap)<20) {
|
|
node.setStyle({
|
|
"transform": "translateX("+moveE.rX+"px) rotate(0deg)"
|
|
})
|
|
return;
|
|
};
|
|
|
|
time = getDate().getTime()-time;
|
|
console.log("time",time);
|
|
if(gap>=leftWidth) gap = leftWidth;
|
|
if(gap<=rightWidth) gap = rightWidth;
|
|
console.log(gap,moveE.rX, "gggg");
|
|
if(direction>0){ //向右滑
|
|
|
|
if(gap<=leftWidth && gap>=0 && moveE.rX == 0){
|
|
gap = leftWidth;
|
|
}else if(gap<=leftWidth && gap>=0 && time>300){
|
|
gap = leftWidth;
|
|
} else if(moveE.rX == leftWidth){
|
|
gap = leftWidth;
|
|
}else {
|
|
gap = 0;
|
|
}
|
|
}else {//向左滑
|
|
if(gap>=rightWidth && gap<=0 && moveE.rX == 0){
|
|
gap=rightWidth;
|
|
}else if(gap>=rightWidth && gap<=0 && time>300){
|
|
gap=rightWidth;
|
|
}else if(moveE.rX == rightWidth){
|
|
gap=rightWidth;
|
|
}else{
|
|
gap = 0;
|
|
}
|
|
}
|
|
moveE.rX = gap;
|
|
node.setStyle({
|
|
"transform": "translateX("+gap+"px) rotate(0deg)"
|
|
})
|
|
|
|
// if (gap <= rightWidth) { // 左滑
|
|
// // 设置左滑最大距离
|
|
// node.setStyle({
|
|
// "transform": "translateX("+rightWidth+"px)"
|
|
// })
|
|
// // 存储左滑距离
|
|
// moveE.rX = rightWidth;
|
|
// } else if (gap >= leftWidth) {
|
|
// //右滑
|
|
// //设置左滑最小距离
|
|
// node.setStyle({
|
|
// "transform": "translateX("+leftWidth+"px)"
|
|
// })
|
|
// // 存储左滑距离
|
|
// moveE.rX = leftWidth;
|
|
// }
|
|
|
|
}
|
|
module.exports = {
|
|
touchStart:function(event, ins){
|
|
// 获取事件触发点的坐标数据
|
|
var touch = event.touches[0] || event.changedTouches[0]
|
|
//存储坐标数据,后期使用
|
|
var moveE = ins.getState();
|
|
moveE.startX = touch.pageX;
|
|
moveE.startY = touch.pageY;
|
|
direction=0;
|
|
time = getDate().getTime();
|
|
ins.callMethod("closePrevBox");
|
|
//默认左滑当前的距离,也要存储起来
|
|
if (!moveE.rX) {
|
|
moveE.rX = 0;
|
|
}
|
|
moveE.pageX = 0;
|
|
console.log('inss', ins.setStyle)
|
|
},
|
|
touchmove: lwmove,
|
|
touchEnd:lwend,
|
|
closePrevBox:function(newValue, oldValue, ownerInstance, instance){
|
|
var node = ownerInstance.selectComponent(".ceil");
|
|
node.setStyle({
|
|
"transform": "translateX(0px) rotate(0deg)"
|
|
})
|
|
},
|
|
rightWidthObserver:rightWidthObserver,
|
|
leftWidthObserver:leftWidthObserver
|
|
}
|
|
</wxs>
|
|
|
|
|