uniapp折叠列表
发表时间：2024-4-12
发布人：葵宇科技
浏览次数：36
在uniapp中创建折叠列表，可以使用<view>标签配合条件渲染和事件处理来实现。以下是一个简单的折叠列表实现示例：
<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>
在这个例子中，list数组中的每个对象都表示一个可折叠的条目，其中isExpanded属性用于跟踪每个条目的展开状态。toggle方法用于切换指定条目的isExpanded状态。通过v-show指令来根据isExpanded的值决定内容是否显示。
