前言
官方文檔沒有暴露出相關(guān)api，那就看看組件源碼。
以下示例均通過?
vue-cli?創(chuàng)建的?uni-app?h5 項(xiàng)目
uView（1.x）版本
源碼
node_modules\uview-ui\components\u-collapse-item\u-collapse-item.vue
這個(gè)方法是用來改變折疊面板子組件收起還是展開的，根據(jù)改變 isShow 的值來實(shí)現(xiàn)
方法
<block v-for="item in 10">
<u-collapse :accordion="true" :arrow="false">
<u-collapse-item :ref="`panel${item}`" :index="item" @change="changeCollapse" title="折疊面板"></u-collapse-item>
</u-collapse>
</block><script>
export default {
name: '',
data() {
return {}
},
methods: {
//監(jiān)聽折疊面板
changeCollapse(obj) {
let { index, show } = obj
this.$nextTick(() => {
for (let i = 1; i < 11; i++) {
this.$refs[`panel${i}`][0].isShow = false
}
})
this.$nextTick(() => {
if (show) {
this.$refs[`panel${index}`][0].isShow = true
}
})
}
}
}
</script>uni-ui版本
源碼
node_modules\@dcloudio\uni-ui\lib\uni-collapse-item\uni-collapse-item.vue
文章來源：http://www.zghlxwxcb.cn/news/detail-739118.html
這個(gè)方法是用來改變折疊面板子組件收起還是展開的，根據(jù)改變 isOpen 的值來實(shí)現(xiàn)文章來源地址http://www.zghlxwxcb.cn/news/detail-739118.html
<block v-for="item in 10">
<uni-collapse @change="changeCollapse($event, String(item))" accordion>
<uni-collapse-item :ref="`panel${item}`" title="折疊面板"></uni-collapse-item>
</uni-collapse>
</block><script>
export default {
name: '',
data() {
return {}
},
methods: {
//監(jiān)聽折疊面板
changeCollapse(e, index) {
this.$nextTick(() => {
for (let i = 1; i < 11; i++) {
this.$refs[`panel${i}`][0].isOpen = false
}
})
this.$nextTick(() => {
if (e) {
this.$refs[`panel${index}`][0].isOpen = true
}
})
}
}
}
</script>到了這里，關(guān)于uniapp collapse動(dòng)態(tài)生成多個(gè)折疊面板手動(dòng)展開收起（包括uni-ui版）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
