uniapp折疊列表
發表時(shí)間：2024-4-12
發布人(rén)：融晨科技
浏覽次數：38
在(zài)uniapp中創建折疊列表，可以(yǐ)使用<view>标簽配合條件渲染和(hé / huò)事件處理來(lái)實現。以(yǐ)下是(shì)一個(gè)簡單的(de)折疊列表實現示例：
<template>
<view>
<view v-for="(item, index) in list" :key="index">
<view @click="toggle(index)">
{{ item.title }} <text>{{ item.isExpanded ? '-' : '+' }}</text>
</view>
<view v-show="item.isExpanded">
{{ item.content }}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{ title: '條目1', content: '内容1', isExpanded: false },
{ title: '條目2', content: '内容2', isExpanded: false },
{ title: '條目3', content: '内容3', isExpanded: false },
// ...更多條目
]
};
},
methods: {
toggle(index) {
this.list[index].isExpanded = !this.list[index].isExpanded;
}
}
};
</script>
<style>
/* 樣式按需添加 */
</style>
在(zài)這(zhè)個(gè)例子(zǐ)中，list數組中的(de)每個(gè)對象都表示一個(gè)可折疊的(de)條目，其中isExpanded屬性用于(yú)跟蹤每個(gè)條目的(de)展開狀态。toggle方法用于(yú)切換指定條目的(de)isExpanded狀态。通過v-show指令來(lái)根據isExpanded的(de)值決定内容是(shì)否顯示。
