uniapp折疊列表

發(fā)表時(shí)間：2024-4-12

發(fā)布人：葵宇科技

瀏覽次數(shù)：38

在uniapp中創(chuàng)建折疊列表，可以使用<view>標(biāo)簽配合條件渲染和事件處理來(lái)實(shí)現(xiàn)。以下是一個(gè)簡(jiǎn)單的折疊列表實(shí)現(xiàn)示例：

<view>

{{ item.title }} <text>{{ item.isExpanded ? '-' : '+' }}</text>

</view>

</view>

</template>

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 },

// ...更多條目

]

};

methods: {

toggle(index) {

this.list[index].isExpanded = !this.list[index].isExpanded;

}

};

</script>

<style>

/* 樣式按需添加 */

</style>

在這個(gè)例子中，list數(shù)組中的每個(gè)對(duì)象都表示一個(gè)可折疊的條目，其中isExpanded屬性用于跟蹤每個(gè)條目的展開狀態(tài)。toggle方法用于切換指定條目的isExpanded狀態(tài)。通過(guò)v-show指令來(lái)根據(jù)isExpanded的值決定內(nèi)容是否顯示。