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
| import { VantComponent } from '../common/component';
| import { isObj, range } from '../common/utils';
| const DEFAULT_DURATION = 200;
| VantComponent({
| classes: ['active-class'],
| props: {
| valueKey: String,
| className: String,
| itemHeight: Number,
| visibleItemCount: Number,
| initialOptions: {
| type: Array,
| value: [],
| },
| defaultIndex: {
| type: Number,
| value: 0,
| observer(value) {
| this.setIndex(value);
| },
| },
| },
| data: {
| startY: 0,
| offset: 0,
| duration: 0,
| startOffset: 0,
| options: [],
| currentIndex: 0,
| },
| created() {
| const { defaultIndex, initialOptions } = this.data;
| this.set({
| currentIndex: defaultIndex,
| options: initialOptions,
| }).then(() => {
| this.setIndex(defaultIndex);
| });
| },
| methods: {
| getCount() {
| return this.data.options.length;
| },
| onTouchStart(event) {
| this.setData({
| startY: event.touches[0].clientY,
| startOffset: this.data.offset,
| duration: 0,
| });
| },
| onTouchMove(event) {
| const { data } = this;
| const deltaY = event.touches[0].clientY - data.startY;
| this.setData({
| offset: range(
| data.startOffset + deltaY,
| -(this.getCount() * data.itemHeight),
| data.itemHeight
| ),
| });
| },
| onTouchEnd() {
| const { data } = this;
| if (data.offset !== data.startOffset) {
| this.setData({ duration: DEFAULT_DURATION });
| const index = range(
| Math.round(-data.offset / data.itemHeight),
| 0,
| this.getCount() - 1
| );
| this.setIndex(index, true);
| }
| },
| onClickItem(event) {
| const { index } = event.currentTarget.dataset;
| this.setIndex(index, true);
| },
| adjustIndex(index) {
| const { data } = this;
| const count = this.getCount();
| index = range(index, 0, count);
| for (let i = index; i < count; i++) {
| if (!this.isDisabled(data.options[i])) return i;
| }
| for (let i = index - 1; i >= 0; i--) {
| if (!this.isDisabled(data.options[i])) return i;
| }
| },
| isDisabled(option) {
| return isObj(option) && option.disabled;
| },
| getOptionText(option) {
| const { data } = this;
| return isObj(option) && data.valueKey in option
| ? option[data.valueKey]
| : option;
| },
| setIndex(index, userAction) {
| const { data } = this;
| index = this.adjustIndex(index) || 0;
| const offset = -index * data.itemHeight;
| if (index !== data.currentIndex) {
| return this.set({ offset, currentIndex: index }).then(() => {
| userAction && this.$emit('change', index);
| });
| }
| return this.set({ offset });
| },
| setValue(value) {
| const { options } = this.data;
| for (let i = 0; i < options.length; i++) {
| if (this.getOptionText(options[i]) === value) {
| return this.setIndex(i);
| }
| }
| return Promise.resolve();
| },
| getValue() {
| const { data } = this;
| return data.options[data.currentIndex];
| },
| },
| });
|
|
