You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
2.2 KiB
62 lines
2.2 KiB
<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>
|
|
|