Blame view

src/components/uni-swipe-action-item/index.wxs 5.7 KB
61d825263   BigBoss   确认订单修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
  /**
   * 监听页面内值的变化,主要用于动态开关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
  	state.left = state.left || state.position[0].left;
  	// 通过用户变量,开启或关闭
  	if (show) {
  		openState(true, instance, ownerInstance)
  	} else {
  		openState(false, 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;
  	// 开始触摸时移除动画类
  	instance.removeClass('ani');
  	var owner = ins.selectAllComponents('.button-hock')
  	for (var i = 0; i < owner.length; i++) {
  		owner[i].removeClass('ani');
  	}
  	// state.position = JSON.parse(instance.getDataset().position);
  	state.left = state.left || state.position[0].left;
  	// 获取最终按钮组的宽度
  	state.width = pageX - state.left;
  	ins.callMethod('closeSwipe')
  }
  
  /**
   * 开始滑动操作
   * @param {Object} e
   * @param {Object} ownerInstance
   */
  function touchmove(e, ownerInstance) {
  	var instance = e.instance;
  	var disabled = instance.getDataset().disabled
  	var state = instance.getState()
  	// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
  	disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
  
  	if (disabled) return
  	var pageX = e.touches[0].pageX;
  	move(pageX - state.width, instance, ownerInstance)
  }
  
  /**
   * 结束触摸操作
   * @param {Object} e
   * @param {Object} ownerInstance
   */
  function touchend(e, ownerInstance) {
  	var instance = e.instance;
  	var disabled = instance.getDataset().disabled
  	var state = instance.getState()
  
  	// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
  	disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
  
  	if (disabled) return
  	// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
  	// fixed by mehaotian 定时器解决点击按钮,touchend 触发比 click 事件时机早的问题 ,主要是 ios13
  	moveDirection(state.left, -40, 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[1].width, Math.min((value), 0));
  	state.left = x;
  	instance.setStyle({
  		transform: 'translateX(' + x + 'px)',
  		'-webkit-transform': 'translateX(' + x + 'px)'
  	})
  	// 折叠按钮动画
  	buttonFold(x, instance, ownerInstance)
  }
  
  /**
   * 移动方向判断
   * @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 isopen = state.isopen
  	if (!position[1].width) {
  		openState(false, ins, ownerInstance)
  		return
  	}
  	// 如果已经是打开状态,进行判断是否关闭,还是保留打开状态
  	if (isopen) {
  		if (-left <= position[1].width) {
  			openState(false, ins, ownerInstance)
  		} else {
  			openState(true, ins, ownerInstance)
  		}
  		return
  	}
  	// 如果是关闭状态,进行判断是否打开,还是保留关闭状态
  	if (left <= value) {
  		openState(true, ins, ownerInstance)
  	} else {
  		openState(false, ins, ownerInstance)
  	}
  }
  
  /**
   * 设置按钮移动距离
   * @param {Object} value
   * @param {Object} instance
   * @param {Object} ownerInstance
   */
  function buttonFold(value, instance, ownerInstance) {
  	var ins = ownerInstance.selectAllComponents('.button-hock');
  	var state = instance.getState();
  	var position = state.position;
  	var arr = [];
  	var w = 0;
  	for (var i = 0; i < ins.length; i++) {
  		if (!ins[i].getDataset().button) return
  		var btnData = JSON.parse(ins[i].getDataset().button)
  
  		// fix by mehaotian TODO 在 app-vue 中,字符串转对象,需要转两次,这里先这么兼容
  		if (typeof(btnData) === 'string') {
  			btnData = JSON.parse(btnData)
  		}
  
  		var button = btnData[i] && btnData[i].width || 0
  		w += button
  		arr.push(-w)
  		// 动态计算按钮组每个按钮的折叠动画移动距离
  		var distance = arr[i - 1] + value * (arr[i - 1] / position[1].width)
  		if (i != 0) {
  			ins[i].setStyle({
  				transform: 'translateX(' + distance + 'px)',
  			})
  		}
  	}
  }
  
  /**
   * 开启状态
   * @param {Boolean} type
   * @param {Object} ins
   * @param {Object} ownerInstance
   */
  function openState(type, ins, ownerInstance) {
  	var state = ins.getState()
  	var position = state.position
  	if (state.isopen === undefined) {
  		state.isopen = false
  	}
  	// 只有状态有改变才会通知页面改变状态
  	if (state.isopen !== type) {
  		// 通知页面,已经打开
  		ownerInstance.callMethod('change', {
  			open: type
  		})
  	}
  	// 设置打开和移动状态
  	state.isopen = type
  
  
  	// 添加动画类
  	ins.addClass('ani');
  	var owner = ownerInstance.selectAllComponents('.button-hock')
  	for (var i = 0; i < owner.length; i++) {
  		owner[i].addClass('ani');
  	}
  	// 设置最终移动位置
  	move(type ? -position[1].width : 0, ins, ownerInstance)
  
  }
  
  module.exports = {
  	sizeReady: sizeReady,
  	touchstart: touchstart,
  	touchmove: touchmove,
  	touchend: touchend
  }