list-with-collapses.vue
2.2 KB
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
<template>
<view class="page">
<page-head :title="title"></page-head>
<view class="uni-card">
<view class="uni-list">
<view class="uni-list-cell uni-collapse" v-for="(list,index) in lists" :key="index" :class="index === lists.length - 1 ? 'uni-list-cell-last' : ''">
<view class="uni-list-cell-navigate uni-navigate-bottom" hover-class="uni-list-cell-hover" :class="list.show ? 'uni-active' : ''"
@click="trigerCollapse(index)">
{{list.title}}
</view>
<view class="uni-list uni-collapse" :class="list.show ? 'uni-active' : ''">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key) in list.item" :key="key" :class="key === list.item.length - 1 ? 'uni-list-cell-last' : ''">
<view class="uni-list-cell-navigate uni-navigate-right"> {{item}} </view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'list-with-collapses',
lists: [{
title: "产品",
show: false,
item: ["iOS", "Android", "HTML5"]
},
{
title: "方案",
show: false,
item: ["PC方案", "手机方案", "TV方案"]
},
{
title: "新闻",
show: false,
item: ["公司新闻", "行业新闻"]
}
]
}
},
methods: {
trigerCollapse(e) {
for (let i = 0, len = this.lists.length; i < len; ++i) {
if (e === i) {
this.lists[i].show = !this.lists[i].show;
} else {
this.lists[i].show = false;
}
}
}
}
}
</script>
<style>
</style>