ProAdvanced/components/side-bar/side-wxs.wxs

/**
 * 监听页面内值的变化,主要用于动态开关swipe-action
 * @param {Object} newValue
 * @param {Object} oldValue
 * @param {Object} ownerInstance
 * @param {Object} instance
 */
function sizeReady(newValue, oldValue, ownerInstance, instance) {
	var state = instance.getState()
	state.position = JSON.parse(newValue)
	if (!state.position || state.position.length === 0) return
	var show = state.position[0].show
	var onceChange = state.position[0].once_change;
	state.left = state.left || state.position[0].left;
	//初始化 bMove
	state.bMove = false;
	// 通过用户变量,开启或关闭
	// console.log("sizeReady",onceChange,show,state);
	if(state.position[0].bInit){
		var x = -state.position[0].width;
		var test = ownerInstance.selectComponent('#my-side-dialog');
		test.setStyle({
			transform: 'translateX(' + x + 'px)',
			'-webkit-transform': 'translateX(' + x + 'px)'
		})
		state.left = x;
		// #my-side-dialog 设置 -500px ，这里要重置为0
		state.position[0].left = 0;
		state.position[0].bInit = false;
	}
	if(!onceChange)return;
	if (show) {
		openState(false, instance, ownerInstance)
	} else {
		openState(true, instance, ownerInstance)
	}
}

/**
 * 开始触摸操作
 * @param {Object} e
 * @param {Object} ins
 */
function touchstart(e, ins) {
	var instance = e.instance;
	var state = instance.getState();
	var pageX = e.touches[0].pageX;
	
	//触发一次
	if(state.bMove)return;
	state.bMove = true;
	
	state.left = state.left || state.position[0].left;
	// console.log(state);
	// 获取最终按钮组的宽度
	state.width = pageX - state.left;
	// console.log("width:",pageX,state.left,state.position[0].left);
	ins.callMethod('openSwipe')
	var test = instance.selectComponent('#my-side-dialog');
	test.removeClass('ani');
	
}

/**
 * 开始滑动操作
 * @param {Object} e
 * @param {Object} ownerInstance
 */
function touchmove(e, ownerInstance) {
	var instance = e.instance;
	var state = instance.getState()
	var pageX = e.touches[0].pageX;
	
	if(!state.bMove)return;
	move(pageX - state.width, instance, ownerInstance)
}

/**
 * 结束触摸操作
 * @param {Object} e
 * @param {Object} ownerInstance
 */
function touchend(e, ownerInstance) {
	var instance = e.instance;
	var state = instance.getState();
	
	if(!state.bMove)return;
	state.bMove = false;
	// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
	moveDirection(state.left, -200, instance, ownerInstance);
}

/**-
 * 设置移动距离
 * @param {Object} value
 * @param {Object} instance
 * @param {Object} ownerInstance
 */
function move(value, instance, ownerInstance) {
	var state = instance.getState()
	// 获取可滑动范围
	var x = Math.max(-state.position[0].width, Math.min((value), 0));
	// console.log(x);
	state.left = x;
	var test = ownerInstance.selectComponent('#my-side-dialog');
	test.setStyle({
		transform: 'translateX(' + x + 'px)',
		'-webkit-transform': 'translateX(' + x + 'px)'
	})
	
}

/**
 * 移动方向判断
 * @param {Object} left
 * @param {Object} value
 * @param {Object} ownerInstance
 * @param {Object} ins
 */
function moveDirection(left, value, ins, ownerInstance) {
	var state = ins.getState()
	var position = state.position
	var isclose = state.isclose
	// 如果是关闭状态,进行判断是否打开,还是保留关闭状态
	if (isclose) {
		if (left >= value) {
			openState(false, ins, ownerInstance)
		} else {
			openState(true, ins, ownerInstance)
		}
		return
	}
	// 如果已经是打开状态,进行判断是否关闭,还是保留打开状态
	if (left <= value) {
		openState(true, ins, ownerInstance)
	} else {
		openState(false, ins, ownerInstance)
	}
	
}

/**
 * 开启状态
 * @param {Boolean} type
 * @param {Object} ins
 * @param {Object} ownerInstance
 */
function openState(type, ins, ownerInstance) {
	var state = ins.getState()
	var position = state.position
	// 设置打开和移动状态
	state.isclose = type
	// console.log("openState",type);
	// 通知页面,已经打开
	ownerInstance.callMethod('change', {
		close: type
	})
	// 添加动画类
	var test = ownerInstance.selectComponent('#my-side-dialog');
	test.addClass('ani');
	// 设置最终移动位置
	move(type ? -position[0].width : 0, ins, ownerInstance)

}

module.exports = {
	sizeReady: sizeReady,
	touchstart: touchstart,
	touchmove: touchmove,
	touchend: touchend
}