您當前位置>首頁 » 新聞資訊 » 技(jì)術(shù)分(fēn)享 >
uniapp折疊列表
發表時(shí)間(jiān)：2024-4-12
發布人(rén)：葵宇科(kē)技(jì)
浏覽次數(shù)：45
在uniapp中創建折疊列表，可(kě)以使用(yòng☆¶>)<view>标簽配合條件(jiàn)渲染和(hé)事(shì)件(jiàn)處理(lǐ)來€σ₩(lái)實現(xiàn)。以下(xià)是(shì)一(yī)個(〕♦gè)簡單的(de)折疊列表實現(xiàn)示例：
<template>
<view>
<view v-for="(item, ind₹±ex) in list" :key="≤&index">
<view @click="toggle(index)"✔¥>
{{ item.title }} <text>{{ item.i&£€≠sExpanded ? '-' : '+' }}</text>
</view>
<view v-show="item.isExpand÷₹©ed">
{{ item.content }}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{ title: '條目1', content: '內(nèi)容1', ₽isExpanded: false },
{ title: '條目2', content: '內(↑σnèi)容2', isExpanded: false },
{ title: '條目3', content: '內(nèi)容3', isExpanded: ↑♥εεfalse },
// ...更多(duō)條目
]
};
},
methods: {
toggle(index) {
this.list[index].isExpanded = !this.list[i✘✔♠ndex].isExpanded;
}
}
};
</script>
<style>
/* 樣式按需添加 */
</style>
在這(zhè)個(gè)例子(zǐ)中，list數(shù)組中的(de)每個(gè)對(duì)象都(dōu)表示一(yī)個(gè)可✘₩δ(kě)折疊的(de)條目，其中isExpanded屬性用(yòng)于跟蹤每個(gè)條目的(de)展開(kāi)狀态>↓。toggle方法用(yòng)于切換指定條目的(de)isExpanded狀态。通(tōng)過v-show指令來(lái)根據isExpanded的(de)值決定內(nèi)容是(shì)否顯示。
