Skip to content

Commit 99f27bc

Browse files
mehaotianmehaotian
committed
update : fab swipe-action
1 parent 767c076 commit 99f27bc

8 files changed

Lines changed: 1006 additions & 1090 deletions

File tree

‎components/uni-fab/uni-fab.vue‎

Lines changed: 386 additions & 354 deletions
Large diffs are not rendered by default.

‎components/uni-swipe-action/index.wxs‎

Lines changed: 108 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@
66
* @param {Object} instance
77
*/
88
function sizeReady(newValue, oldValue, ownerInstance, instance) {
9-
var state = instance.getState()
10-
state.position = JSON.parse(instance.getDataset().position)
11-
if (state.position.length === 0) return
12-
var show = state.position[0].show
13-
state.left = state.left || state.position[0].left;
14-
// 通过用户变量,开启或关闭
15-
if (show) {
16-
openState(true, instance, ownerInstance)
17-
} else {
18-
openState(false, instance, ownerInstance)
19-
}
9+
var state = instance.getState()
10+
state.position = JSON.parse(instance.getDataset().position)
11+
if (state.position.length === 0) return
12+
var show = state.position[0].show
13+
state.left = state.left || state.position[0].left;
14+
// 通过用户变量,开启或关闭
15+
if (show) {
16+
openState(true, instance, ownerInstance)
17+
} else {
18+
openState(false, instance, ownerInstance)
19+
}
2020
}
2121

2222
/**
@@ -25,20 +25,20 @@ function sizeReady(newValue, oldValue, ownerInstance, instance) {
2525
* @param {Object} ins
2626
*/
2727
function touchstart(e, ins) {
28-
var instance = e.instance;
29-
var state = instance.getState();
30-
var pageX = e.touches[0].pageX;
31-
// 开始触摸时移除动画类
32-
instance.removeClass('ani');
33-
var owner = ins.selectAllComponents('.button-hock')
34-
for (var i = 0; i < owner.length; i++) {
35-
owner[i].removeClass('ani');
36-
}
37-
state.position = JSON.parse(instance.getDataset().position);
38-
state.left = state.left || state.position[0].left;
39-
// 获取最终按钮组的宽度
40-
state.width = pageX - state.left;
41-
ins.callMethod('openSwipe')
28+
var instance = e.instance;
29+
var state = instance.getState();
30+
var pageX = e.touches[0].pageX;
31+
// 开始触摸时移除动画类
32+
instance.removeClass('ani');
33+
var owner = ins.selectAllComponents('.button-hock')
34+
for (var i = 0; i < owner.length; i++) {
35+
owner[i].removeClass('ani');
36+
}
37+
state.position = JSON.parse(instance.getDataset().position);
38+
state.left = state.left || state.position[0].left;
39+
// 获取最终按钮组的宽度
40+
state.width = pageX - state.left;
41+
ins.callMethod('openSwipe')
4242
}
4343

4444
/**
@@ -47,12 +47,12 @@ function touchstart(e, ins) {
4747
* @param {Object} ownerInstance
4848
*/
4949
function touchmove(e, ownerInstance) {
50-
var instance = e.instance;
51-
var disabled = instance.getDataset().disabled
52-
var state = instance.getState()
53-
if (disabled) return
54-
var pageX = e.touches[0].pageX;
55-
move(pageX - state.width, instance, ownerInstance)
50+
var instance = e.instance;
51+
var disabled = instance.getDataset().disabled
52+
var state = instance.getState()
53+
if (disabled) return
54+
var pageX = e.touches[0].pageX;
55+
move(pageX - state.width, instance, ownerInstance)
5656
}
5757

5858
/**
@@ -61,12 +61,12 @@ function touchmove(e, ownerInstance) {
6161
* @param {Object} ownerInstance
6262
*/
6363
function touchend(e, ownerInstance) {
64-
var instance = e.instance;
65-
var disabled = instance.getDataset().disabled
66-
var state = instance.getState()
67-
if (disabled) return
68-
// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
69-
moveDirection(state.left, -40, instance, ownerInstance)
64+
var instance = e.instance;
65+
var disabled = instance.getDataset().disabled
66+
var state = instance.getState()
67+
if (disabled) return
68+
// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
69+
moveDirection(state.left, -40, instance, ownerInstance)
7070
}
7171

7272
/**
@@ -76,16 +76,16 @@ function touchend(e, ownerInstance) {
7676
* @param {Object} ownerInstance
7777
*/
7878
function move(value, instance, ownerInstance) {
79-
var state = instance.getState()
80-
// 获取可滑动范围
81-
var x = Math.max(-state.position[1].width, Math.min((value), 0));
82-
state.left = x;
83-
instance.setStyle({
84-
transform: 'translateX(' + x + 'px)',
85-
'-webkit-transform': 'translateX(' + x + 'px)'
86-
})
87-
// 折叠按钮动画
88-
buttonFold(x, instance, ownerInstance)
79+
var state = instance.getState()
80+
// 获取可滑动范围
81+
var x = Math.max(-state.position[1].width, Math.min((value), 0));
82+
state.left = x;
83+
instance.setStyle({
84+
transform: 'translateX(' + x + 'px)',
85+
'-webkit-transform': 'translateX(' + x + 'px)'
86+
})
87+
// 折叠按钮动画
88+
buttonFold(x, instance, ownerInstance)
8989
}
9090

9191
/**
@@ -96,28 +96,28 @@ function move(value, instance, ownerInstance) {
9696
* @param {Object} ins
9797
*/
9898
function moveDirection(left, value, ins, ownerInstance) {
99-
var state = ins.getState()
100-
var position = state.position
101-
var isopen = state.isopen
102-
if (!position[1].width) {
103-
openState(false, ins, ownerInstance)
104-
return
105-
}
106-
// 如果已经是打开状态,进行判断是否关闭,还是保留打开状态
107-
if (isopen) {
108-
if (-left <= position[1].width) {
109-
openState(false, ins, ownerInstance)
110-
} else {
111-
openState(true, ins, ownerInstance)
112-
}
113-
return
114-
}
115-
// 如果是关闭状态,进行判断是否打开,还是保留关闭状态
116-
if (left <= value) {
117-
openState(true, ins, ownerInstance)
118-
} else {
119-
openState(false, ins, ownerInstance)
120-
}
99+
var state = ins.getState()
100+
var position = state.position
101+
var isopen = state.isopen
102+
if (!position[1].width) {
103+
openState(false,ins, ownerInstance)
104+
return
105+
}
106+
// 如果已经是打开状态,进行判断是否关闭,还是保留打开状态
107+
if (isopen) {
108+
if (-left <= position[1].width) {
109+
openState(false, ins, ownerInstance)
110+
} else {
111+
openState(true, ins, ownerInstance)
112+
}
113+
return
114+
}
115+
// 如果是关闭状态,进行判断是否打开,还是保留关闭状态
116+
if (left <= value) {
117+
openState(true, ins, ownerInstance)
118+
} else {
119+
openState(false, ins, ownerInstance)
120+
}
121121
}
122122

123123
/**
@@ -127,25 +127,25 @@ function moveDirection(left, value, ins, ownerInstance) {
127127
* @param {Object} ownerInstance
128128
*/
129129
function buttonFold(value, instance, ownerInstance) {
130-
var ins = ownerInstance.selectAllComponents('.button-hock');
131-
var state = instance.getState();
132-
var position = state.position;
133-
var arr = [];
134-
var w = 0;
135-
for (var i = 0; i < ins.length; i++) {
136-
if (!ins[i].getDataset().button) return
137-
var btnData = JSON.parse(ins[i].getDataset().button)
138-
var button = btnData[i] && btnData[i].width || 0
139-
w += button
140-
arr.push(-w)
141-
// 动态计算按钮组每个按钮的折叠动画移动距离
142-
var distance = arr[i - 1] + value * (arr[i - 1] / position[1].width)
143-
if (i != 0) {
144-
ins[i].setStyle({
145-
transform: 'translateX(' + distance + 'px)',
146-
})
147-
}
148-
}
130+
var ins = ownerInstance.selectAllComponents('.button-hock');
131+
var state = instance.getState();
132+
var position = state.position;
133+
var arr = [];
134+
var w = 0;
135+
for (var i = 0; i < ins.length; i++) {
136+
if (!ins[i].getDataset().button) return
137+
var btnData = JSON.parse(ins[i].getDataset().button)
138+
var button = btnData[i] && btnData[i].width || 0
139+
w += button
140+
arr.push(-w)
141+
// 动态计算按钮组每个按钮的折叠动画移动距离
142+
var distance = arr[i - 1] + value * (arr[i - 1] / position[1].width)
143+
if (i != 0) {
144+
ins[i].setStyle({
145+
transform: 'translateX(' + distance + 'px)',
146+
})
147+
}
148+
}
149149
}
150150

151151
/**
@@ -155,29 +155,29 @@ function buttonFold(value, instance, ownerInstance) {
155155
* @param {Object} ownerInstance
156156
*/
157157
function openState(type, ins, ownerInstance) {
158-
var state = ins.getState()
159-
var position = state.position
160-
// 设置打开和移动状态
161-
state.isopen = type
158+
var state = ins.getState()
159+
var position = state.position
160+
// 设置打开和移动状态
161+
state.isopen = type
162162

163-
// 通知页面,已经打开
164-
ownerInstance.callMethod('change', {
165-
open: type
166-
})
167-
// 添加动画类
168-
ins.addClass('ani');
169-
var owner = ownerInstance.selectAllComponents('.button-hock')
170-
for (var i = 0; i < owner.length; i++) {
171-
owner[i].addClass('ani');
172-
}
173-
// 设置最终移动位置
174-
move(type ? -position[1].width : 0, ins, ownerInstance)
163+
// 通知页面,已经打开
164+
ownerInstance.callMethod('change', {
165+
open: type
166+
})
167+
// 添加动画类
168+
ins.addClass('ani');
169+
var owner = ownerInstance.selectAllComponents('.button-hock')
170+
for (var i = 0; i < owner.length; i++) {
171+
owner[i].addClass('ani');
172+
}
173+
// 设置最终移动位置
174+
move(type ? -position[1].width : 0, ins, ownerInstance)
175175

176176
}
177177

178178
module.exports = {
179-
sizeReady: sizeReady,
180-
touchstart: touchstart,
181-
touchmove: touchmove,
182-
touchend: touchend
179+
sizeReady: sizeReady,
180+
touchstart: touchstart,
181+
touchmove: touchmove,
182+
touchend: touchend
183183
}

0 commit comments

Comments
 (0)