-
Notifications
You must be signed in to change notification settings - Fork 1
/
list.vue
119 lines (117 loc) · 2.48 KB
/
list.vue
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
<template>
<div>
<list class="list">
<cell
v-for="(v,i) in rows"
append="tree"
:index="i"
:key="i"
class="row"
@appear="onappear(i, $event)"
@disappear="ondisappear(i, $event)">
<div class="item">
<text class="item-title">row {{v.id}}</text>
</div>
</cell>
</list>
<text class="count" :value="'Appear items: ' + appearMin + ' ~ ' + appearMax"></text>
</div>
</template>
<style scoped>
.list {
height:850px
}
.count {
font-size: 32px;
margin:10px;
}
.indicator {
height: 40px;
width: 40px;
color:#45b5f0;
}
.row {
width: 750px;
}
.item {
justify-content: center;
border-bottom-width: 1px;
border-bottom-color: #c0c0c0;
height: 100px;
padding:20px;
}
.item:active {
background-color: #F2F2F2;
}
.item-title {
}
</style>
<script>
module.exports = {
methods: {
onappear: function (idx, e) {
var appearId = this.rows[idx].id;
console.log('+++++', appearId);
var appearIds = this.appearIds;
appearIds.push(appearId);
this.getMinAndMaxIds(appearIds);
},
ondisappear:function (idx, e) {
var disAppearId = this.rows[idx].id;
console.log('+++++', disAppearId);
var appearIds = this.appearIds;
var index = appearIds.indexOf(disAppearId);
if (index > -1) {
appearIds.splice(index, 1);
}
this.getMinAndMaxIds(appearIds);
},
getMinAndMaxIds:function (appearIds) {
appearIds.sort(function(a, b) {
return a - b;
});
this.appearIds = appearIds;
this.appearMax = appearIds[appearIds.length - 1];
this.appearMin = appearIds[0];
}
},
data: function () {
return {
appearMin:1,
appearMax:1,
appearIds:[],
rows:[
{id: 1},
{id: 2},
{id: 3},
{id: 4},
{id: 5},
{id: 6},
{id: 7},
{id: 8},
{id: 9},
{id: 10},
{id: 11},
{id: 12},
{id: 13},
{id: 14},
{id: 15},
{id: 16},
{id: 17},
{id: 18},
{id: 19},
{id: 20},
{id: 21},
{id: 22},
{id: 23},
{id: 24},
{id: 25},
{id: 26},
{id: 27},
{id: 28},
{id: 29}
]
}
}
}
</script>