您當前位置>首頁 » 新聞資訊 » 技(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, index≤↕δ) in list" :key="index">
<view @click="toggle(index)"> ÷σ£
{{ item.title }} <text>{{ item.isExpa±×♠nded ? '-' : '+' }}</text&g≠$'t;
</view>
<view v-show="item.isExpanded&γ™quot;>
{{ 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', isExpaε™nded: 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ì)否顯示。
